一、同步请求和异步请求

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

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

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

同步请求:

客户端请求(等待)->服务端处理->响应->页面载入 (缺少对象: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();

(2)请求 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){
        //成功处理
    }
});

版权声明:文章转载请注明来源,如有侵权请联系博主删除!
最后修改:2019 年 12 月 25 日 01 : 39 PM
如果觉得我的文章对你有用,请随意赞赏
评论打卡也可以哦,您的鼓励是我最大的动力!