Ajax的使用

1、AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

2、Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

3、Ajax的优点和缺点：
优点：

1. AJAX使用Javascript技术向服务器发送异步请求；
2. AJAX无须刷新整个页面；
3. 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；
4. 不需要插件支持。（原生js就支持）

缺点：

1. AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
2. 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

4、Ajax的实现方式（原生JS）：

1. 准备xmlhttprequest对象
2. 调用对象的open方法（打开连接）
3. 调用对象的send方法（发送请求）
4. 监听状态的改变（接收服务器的响应）
   

get请求：

   //1.准备xmlhttprequest对象
   let xhr = new XMLHttpRequest();
   //2.open方法的三个参数：
   // 1.请求方式 get post push 等...
   // 2.请求的url
   // 3.是否异步 默认值为true 异步 （一般不用第三个参数）
   xhr.open("get", "http://127.0.0.1:3000/index");
   //3.调用对象的send方法
   xhr.send();
   // 4.监听状态的改变
   xhr.onreadystatechange = function() {
       // 状态的值有5种  0-4  4代表最终的成功
       // 还要判断服务器的响应码  200表示响应成功
       if (xhr.readyState == 4 && xhr.status == 200) {
           // 真正的成功
           msg.innerHTML = xhr.responseText;
       }
   }

post请求：（post请求需要设置请求头）

  //1.准备xmlhttprequest对象
  let xhr = new XMLHttpRequest();
  xhr.open("post", "http://127.0.0.1:3000/postParams");

  //post请求 发送参数需要设置请求头。
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  //3.调用对象的send方法
  xhr.send("name:'小明',age:2");
  // 4.监听状态的改变
  xhr.onreadystatechange = function() {
      // 状态的值有5种  0-4  4代表最终的成功
      // 还要判断服务器的响应码  200表示响应成功
      if (xhr.readyState == 4 && xhr.status == 200) {
          // 真正的成功
          msg.innerHTML = xhr.responseText;
      }
  }

5、jQuery实现方式 ：

 1.* 语法：$.ajax({键值对});
      //使用$.ajax()发送异步请求
         $.ajax({
             url:"http://127.0.0.1:3000/postParams" , // 请求路径
             type:"post" , //请求方式（默认为get）
             //data: "username=jack&age=23",//请求参数
             data:{"username":"小明","age":23},
             success:function (data) {
                 alert(data);
             },//响应成功后的回调函数
             error:function () {
                 alert("出错啦...")
             },//表示如果请求响应出现错误，会执行的回调函数
         });
         
 2. $.get()：发送get请求
     * 语法：$.get(url, [data], [callback], [type])
         * 参数：
             * url：请求路径
             * data：请求参数
             * callback：回调函数
             * type：响应结果的类型
             
 3. $.post()：发送post请求
     * 语法：$.post(url, [data], [callback], [type])
         * 参数：
             * url：请求路径
             * data：请求参数
             * callback：回调函数
             * type：响应结果的类型