目录

一、同步请求和异步请求

二、原生 Ajax 的使用

三、 jQuery 中的 Ajax

一、同步请求和异步请求

先解释一下同步和异步的概念：

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

同步请求:

客户端请求(等待)->服务端处理->响应->页面载入 （缺少对象:XMLhttpRequest）
这时候如果有错误，只能再次发送请求，再次等待

异步请求：

比如当你填写邮箱地址的时候，页面当时就把邮箱地址发送到了服务器（也就是页面发送了一个请求），服务器做处理和响应，得到你的邮箱地址填写重复了，把响应结果发给页面，在这个过程中你仍然可以填写其他内容，这时候服务器会提示你有重复的邮箱地址，在页面上的表现只是邮箱地址旁别加了一行字或者把整个文本框标红，并没有重新刷你的页面，所有的填写错误会实时的显示出来，你也会实时的更正。这个过程中，你会有整个页面的刷新，也不会有整个页面的提交和等待，最后提交，一切都会搞定的

二、原生 Ajax 的使用

1.概念

AJAX即“Asynchronous Javascript And XML”（ 异步 JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
它是一套综合了多项技术的浏览器端网页开发技术。这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest. 

2.步骤

(1)XMLHttpRequest

  • XMLHttpRequest 是浏览器的内置对象, 作用是在后台与服务器通信( 交换数据 )
  • 用于网页的局部更新, 而不是刷新整个页面
// 创建一个新的 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();

()请求 Request

HTTP 请求由 3 个部分组成, 正好和 XMLHttpRequest 相对应

//请求行 open
    xhr.open( 'post', 'url' );
    //请求头 setRequestHeader  // post 请求需要设置头
    xhr.setRequestHeader( 'Conent-Type' , 'application/x-www-form-            urlencoed' ); // get 请求可以不设置请求头
    //请求主体 send
    xhr.send( 'name=Jim&age=18' ); // get 可以传空, 因为在头的时候已经传过数据了

(3)响应 Response

//HTTP 响应是由服务端放出的, 客户端更应该关心度额是响应的结果
    //HTTP 响应由 3 个部分组成, 与 XMLHttpRequest 的方法或属性成对应关系
    //由于服务器做出响应需要时间( 网络延迟等原因 ),所以需要监听服务器响应状态, 再进行处理
     if( xhr.readyState == 4 && xhr.status == 200 ){
        // 进行下一步操作, 如渲染页面
        document.querySelector( '#result' ).innerHTML = xhr.responseText;
     }

3.get 和 post 的差异

  1. get 没有请求主体, 使用 xhr.send(null) 发送请求主体
  2. get 可以通过请求 url 上添加请求函数
  3. post 可以通过 xhr.send( 'name=itcast&age=10' ) 发送请求主体
  4. post 需要设置
  5. get 性能高( 基本上获取内容都是使用get )
  6. get 大小限制约 4kb, post 则没有限制 

4.get 方式的 请求响应

var xhr = new XMLHttpRequest;
        xhr.open('get','url');
        xhr.send(null);
        xhr.onreadystatechange = function(){
         if(xhr.status == 200 && xhr.readyState == 4){
             /*获取到XML格式内容  放回的是DOM对象  document*/
             var xml = xhr.responseXML;
             /*通过选着器可以获取到xml的数据*/
             console.log(xml.querySelectorAll('array')[0].querySelector('src').innerHTML);
         }
    }

5.post 请求和响应

//初始化
    var xhr = new XMLHttpRequest();
    //请求行
    xhr.open("post","url");
    //请求头
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
    //请求内容
    xhr.send("username=rxt&password=1234");

    //监听响应改变
    xhr.onreadystatechange = function(){

        /*什么时候才算是http通讯结束 在readyState=4的是 响应完成*/
        /*什么是才算是通讯成  status 200 */

        if(xhr.status ==200 && xhr.readyState == 4){
            document.querySelector("div").innerHTML = xhr.responseText;
        }

    }

三、 jQuery 中的 Ajax

1.jQuery为我们提供了更强大的Ajax封装

  • $.ajax({}) 可配置方式发起Ajax请求
  • $.get() 以GET方式发起Ajax请求
  • $.post() 以POST方式发起Ajax请求
  • $('form').serialize() 序列化表单（即格式化key=val&key=val）
  • url 接口地址
  • type 请求方式
  • timeout 请求超时
  • dataType 服务器返回格式
  • data 发送请求数据
  • beforeSend: function () {} 请求发起前调用
  • success 成功响应后调用
  • error 错误响应时调用
  • complete 响应完成时调用（包括成功和失败）

2.$.ajax 使用

$.ajax({
    type : 'post',
    url : 'url',
    data : {'mobile' : phone},
    dataType : 'json',
    beforeSend : function(){

    },
    success : function(info){
        //成功处理
    }
});