day27

ajax基本流程

  1. const xhr = new XMLHttpRequest();
  2. xhr.open(方法, 地址);
  3. xhr.send();
  4. xhr.onload = function() {
  5.     if (xhr.readyState==4 && xhr.status==200){
  6.         console.log(xhr.responseText)
  7.     }
  8. }

get方式传输数据

当需要以get方式请求接口时，需要进行下面的设置：

  1. xhr.open('get', 地址)

如果需要传递数据，那么数据将以字符串的形式拼接到地址后面。

  1. http://127.0.0.1/reg?user=zhangsan

post形式传递数据

post形式传值，数据格式有三种:json、urlencode、formdata。

如果传递的数据是json格式：

  1. const xhr = new XMLHttpRequest();
  2. xhr.open('post', 'http://127.0.0.1/reg');
  3. //想要传递json数据，必须进行下面的设置，而且下面的设置必须要写在open 和send之间
  4. xhr.setRequestHeader('content-type', 'application/json');// 设置完成后，请求头部的格式就会变成json格式
  6. xhr.send(obj_json); // 将要传递的数据传入到xhr.send()方法中
  7. xhr.onload = function() {
  8.   if (xhr.readyState==4 && xhr.status==200){
  9.         console.log(xhr.responseText)
  10.     }
  11. }

如果传递的数据是urlencode格式：

  1. // 想要传递urlencode格式，需要更改请求头
  2. xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
  4. // 传递数据的格式是urlencode格式
  5. xhr.send('username=zhangsan&pass=abc123&c[0]=100&c[1]=200'); // 将要传递的数据传入到xhr.send()方法中
  7. 其他部分和之前的写法一致