jQuery异步ajax

开发工具与关键技术：Visual Studio 2015 jQuery
作者：郭程富
撰写时间：2020年5月6日

知识点：
  Ajax 简介：
   （Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）） [eɪˈsɪŋkrənəs]。
1.什么是AJAX？
     Ajax不是某种编程语言，AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
     传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
     有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图等等。
2.同步与异步
      同步：就是指一个进程在执行某个请求的时候，
           若该请求需要一段时间才能返回信息，
           那么这个进程将会一直等待下去，
           直到收到返回信息才继续执行下去；
      同步： 
               请求一 1ms
               请求二 1ms
               请求三  1ms
               异步 1.3ms
      异步：是指进程不需要一直等下去，
            而是继续执行下面的操作，不管其他进程的状态。
            当有消息返回时系统会通知进程进行处理，
            这样可以提高执行的效率。
      异步实现：
            1、运用HTML与CSS来实现页面，表达信息。
            2、运用XMLHttpRequest和web服务器进行数据的异步交换。
          3、运用JavaScript操作DOM，实现动态局部刷新。
   3.    AJAX-创建XMLHttpRequest 对象
      什么是XMLHttpRequest对象？
       XMLHttpRequest对象用于在后台与服务器交换数据（具体介绍可见w3c）
            创建XMLHttpRequest对象
            所有现代浏览器（IE7+、Firefox、Chrome、Safari 
            以及 Opera）均内建 XMLHttpRequest 对象。
            创建XMLHttpRequest对象的语法：
                    var xhr = new XMLHttpRequest();
            老版本的Internet Explorer(IE5和IE6)使用ActiveXObject对象：
                    var xhr=new ActiveXObject("Microsoft.XMLHTTP");
            为了应对所有的现代浏览器,包括IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象.如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
                    var xhr;
                    if(window.XMLHttpRequest){
                        // code for IE7+, Firefox, Chrome, Opera, Safari
                        xhr=new XMLHttpRequest();
                    }else{
                        // code for IE6, IE5
                        xhr=new ActiveXObject("Microsoft.XMLHTTP");
                    }
4.   AJAX - 向服务器发送请求
   向服务器发送请求,我们使用XMLHttpRequest对象的 open() 和 send() 方法：
                open(method,url,asyns) 规定请求的类型、URL 以及是否异步处理请求。
                    参数说明：
                    method：请求的类型；GET 或 POST 
                    url：文件在服务器上的位置 
                    async：true（异步）或 false（同步）Asynchronous 
                send(string):将请求发送到服务器
                    参数说明:string 仅用于POST请求 
                一个简单的GET请求:
                    xhr.open("GET","/Ajax02/getInfor",true)
                    xhr.send();
                一个简单的POST请求:
                    xhr.open("POST","/Ajax02/getInfor",true)
                    xhr.send();
                如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头然后在 send() 方法中规定您希望发送的数据：
                    xhr.open("POST","/jQueryAjax/postPersonInfor",true);
                    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                    xhr.send(data);//data表单中需要提交的数据（字符串）
                setRequestHeader语法：
                setRequestHeader(header,value)：向请求添加HTTP头。
                    参数说明：
                        header: 规定头的名称 
                        value: 规定头的值
5. AJAX 服务器响应
                使用XMLHttpRequest对象的responseText或responseXML属性获取来自服务器的响应
                responseText:获得字符串形式的响应数据。
                responseXML：获得 XML 形式的响应数据。
6. AJAX onreadystatechange事件
                在XMLHttpRequest对象中，readyState属性存有XMLHttpRequest的状态信息，
                每当readyState改变时，就会触发onreadystatechange事件。
            下面是XMLHttpRequest对象的三个重要属性：
                onreadystatechange:存储函数(或函数名),每当readyState属性改变时,就会调用该函数。
                readyState:存有XMLHttpRequest的状态。从0到4发生变化。
                    0: 请求未初始化 
                    1: 服务器连接已建立 
                    2: 请求已接收 
                    3: 请求处理中 
                    4: 请求已完成，且响应已就绪 
                status: 200: "OK"  404: 未找到页面
                在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
                当readyState等于4且status为 200 时，表示响应已就绪：
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var txt = xhr.responseText;
                        console.log(txt);
                    }
                }  
AJAX的异步和同步就说到这里。