Ajax快速了解与应用这是我参与更文挑战的第13天一.Ajax简介： AJAX技术能够实现无需重新加载整个网页，就可以

这是我参与更文挑战的第13天

一.Ajax简介：

AJAX技术能够实现无需重新加载整个网页，就可以更新部分网页内容。在WEB应用中AJAX使用十分广泛，百度，淘宝，京东等常见的PC端网页以及各种WEB APP, 随处可见它的身影，AJAX已经成为前端工程师的常备技能之一。
当然，AJAX并不是一门编程语言，是一种将现有标准组合在一起的方式。

二.JSON简介：

现在应用Ajax一般用JSON格式。
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

三.ajax的优缺点：

优点：

不用刷新页面就可以与服务端通信。
允许根据用户发生的事件来更新部分页面内容。

缺点：

没有浏览历史，无回退可言。
存在跨域问题。
对SEO不友好。

四.HTTP协议简介*：

超文本传输协议（Hypertext Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。
详细规定了浏览器与万维网服务器之间的通信规则。
格式如下。

请求报文（包括4部分组成）： 1.行
请求 + / 路径 + 协议版本 2.头 名字：值 3.空行 4.体 若为get请求此处为空，若为post请求，可以不为空。

响应报文（包括4部分组成）： 1.行
协议版本 + 响应状态码 + 响应状态字符串如： HTTP/1.1 200 OK 2.头 名字：值 3.空行 4.体 返回html内容

五：AJAX使用：

1.基本请求操作：

让名字=xhr;

  // 1.创建对象
     const 名字 = new XMLHttpRequest();
     //如让名字=xhr;
     // 2. 初始化 设置请求的方法与 url请求地址 
     xhr.open('GET','http://............');
     // 3. 发送
     xhr.send();
      // 4.事件绑定，处理服务端返回结果
     xhr.onreadystatechange = function(){
         //判断服务端返回了所有结果
         if(xhr.readyState === 4){
             //判断响应状态码 200 404 403 500 ....等
             // 2xx 都表示成功
             if(xhr.status>=200&&xhr.status<300){
                 // 此处处理结果;
                // console.log(xhr.status);  可得状态码
               //  console.log(xhr.statusText);  可得状态字符串
               //  console.log(xhr.getAllResponseHeaders()); 可得所有响应头
               //  console.log(xhr.response); 可得响应体
               ....此处对得到进行数据进行处理....略......
             }else{

             }

         }
     }

2.GET请求设置请求参数：

地址后面加上？+ 参数=值，多个参数用&隔开

 xhr.open('GET','http://............?a=50&b=10');

3. ajax的post请求与设置请求参数：

 xhr.open('POST','http://............');

请求参数在send（）里的，可设置任意格式数据,如：

xhr.send('a=100&b=200&c=250');

xhr.send('a:100&b:200&c:250');

xhr.send('123456789');

....

3.ajax设置请求头信息：

在open（）下面写。可写预定义或自定义的名字。后端会给。 xhr.setRequestHeader（‘名字’，‘值’）；

 ...............略
     xhr.open('GET','http://............');
     xhr.setRequestHeader（‘name’，‘atguigu’）；
     xhr.send();
...............略

4. 响应JOSN数据：

（1）手动转换成JSON数据：在处理结果里写。

let data = JSON.parse(xhr.response);

（2）自动转换（推荐）：在xhr.open()上面写。

xhr.responseType = 'JSON';

5.解决旧 ie 缓存问题：

xhr.open("GET",'http://......?t='+ Data.now());

6.网络请求超时与异常处理：

......略
 const xhr = new XMLHttpRequest();
 // 设置2s就为超时
 xhr.timeout = 2000;
 //超时后回调，可设置一些精美的提醒效果
 xhr.ontimeout = function(){
       alert("请稍后重试！");
 }
 //网络异常回调
 xhr.onerror = function(){
       alert("网络似乎出现问题！");
}
...略

7. 重复请求发送问题：

有时加载比较慢，用户狂点发送相同请求导致服务器负荷较大问题：处理：把上一个没完成的请求清除，重新发送，保持始终只有一个请求。

let x=null;
//定义一个变量，判断是否正在发送请求
let isSending = false;
....
//在要发送请求的事件里（假如要发请求，执行以下）：
{
...
if(isSending) x=abort(); //取消该请求，发送新请求
x = new XMLHttpRequest();
isSending = true; // 先为true，正在发送请求
....
 //如果返回了所有结果，完成请求
   if(xhr.readyState === 4){
        isSending = false;
 }
 .....
}

8. axios 发送 ajax 简易请求：

axios官网 GET请求：

axios.get('http://...',{
   // 设置url参数，如：
   params: {
     id: 50,
     vip: 5
  }    
  // 设置请求头参数，如：
  headers: {
     name: 'night',
     age: 21
  }
}).then(value => {
  // 处理结果
     console.log(value);
} )

POST请求：

axios.post('http：......', {
//请求体
    username: 'admin',
    password: 'admin'
  },{ 
  // 设置url参数，如：
    params: {
     id: 50,
     vip: 5
      },
      // 设置请求头参数，如：
     headers: {
     width: 150,
     height: 200,
       }
  });

9.axios函数方式发送ajax请求（这种更清晰直观）：

axios({
      // 请求地址url
   url: 'https....',
      //  请求方法，如：
   method: 'POST',
     //  请求参数，如：
   params: {
      id: 5
   }
     //  请求头信息，如（没有就不写）： 
   headers: {
      a: 100,
      b: 200
   }
    //  请求体信息 （没有就不写）如：
   data: {
    username: 'admin',
    password: 'admin'
   }
}).then(response => {
  // 这里处理返回结果
     // 响应状态码
     console.log(response.status);
     // 响应状态字符串
     console.log(response.statusText);
     // 响应头信息
     console.log(response.headers);
     // 响应体，就是主要获得的数据部分
     console.log(response.data);
})

10. 使用Fetch函数发送ajax请求（了解即可，还是axios用的多）：

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。 Fetch文档

fetch('https://.....',{
// 请求方法，如：
  method: 'POST',
//请求头，如：
  headers: {
    name: 'night'
  },
// 请求体，如：
  body: 'username=admin&password=admin'
}).then(response => {
  // 转换成json格式
  return response.json();
}).then(response => {
  // 处理结果数据
  console.log(response);
})

Ajax快速了解与应用