Ajax的请求、事件、其他

开发工具与关键技术：Visual Studio / 向服务器发送请求、onreadystatechange事件
作者：郑名方
撰写时间：2019年4月 25日

Ajax的操作是jQuery库技持完成。下面表格的函数分为三个类型：请求、事件、还有其他。请求分别是：$.ajax、load、$.get、$.getJSON、$.getScript、$post。事件分别是:ajaxComplete、ajaxError、ajaxSend、ajaxStart、ajaxStop、ajaxSuccess。其他分别是:$. ajaxPrefilter、$. ajaxSetup、serialize、serializeArray。

函数	描述
.ajaxComplete()	当Ajax请求完成后注册一个回调函数。这是一个Ajax Event。
.ajaxError()	Ajax请求出错时注册一个回调函数，这是一个Ajax Event。
.ajaxSend()	在AJAX请求刚开始执行一个处理函数。这是一个Ajax Event。
.ajaxStart()	在AJAX请求完成时执行一个处理函数。这是一个Ajax Event。
.ajaxStop()	绑定一个函数当Ajax请求完成时执行。这是一个Ajax Event。
.ajaxSuccess()	绑定一个函数当Ajax请求成功完成时执行。这是一个Ajax Event。
jQuery.ajax()	执行一个异步的HTTP（Ajax）的请求。
jQuery.ajaxPrefilter()	在每个请求之前被发送和$.ajax()处理它们前处理，设置自定义Ajax选项或修改现有选项。
jQuery.ajaxSetup()	为以后要用到Ajax请求设置默认的值。
jQuery.ajaxTranspost()	创建一个对象，用于处理Ajax数据的实际传输。
jQuery.get()	使用一个HTTP GET请求从服务器加载数据。
jQuery.getJSON()	使用一个HTTP GET请求从服务器加载JSON编码的数据。
jQuery.getScript()	使用一个HTTP GET请求从服务器加载并执行一个JavaScript文件
jQuery.param()	创建一个数组或对象的字符串，适用于一个URL地址查询字符串或Ajax请求。
jQuery.post()	使用一个HTTP POST请求从服务器加载数据。
.load()	从服务器载入数据并且将返回的HTML代码并插入至匹配的元素中。
.serialize()	将用作提交的表单元素的至编译成字符串。
.serializeArray()	将用作提交的表单元素的值编译成拥有name和value对象组成的数组。

Ajax向服务器发送请求，使用XMLHttpRequest 对象的open()和send()方法：
Open(method,url,async)规定请求的类型、URL以及是否异步处理请求。
Send(string):将请求发送到服务器。

AJAX onrendystatechange 事件每当readyState改变时，就会触发onrendystatechange事件。readyState属性存有XMLHttpRequest的状态信息。下面是XMLHttpRequest对象的三个重要的属性:onrendystatechange :存储函数，每当readyState属性改变时，就会调用该函数。
readyState：存有XMLHttpRequest的状态。从0到4发生变化。
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4: 请求已完成，且响应已就绪
status: 200: “OK” 404: 未找到页面
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

下面的代码图片是老师上课。

  xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var txt = xhr.responseText;
                        console.log(txt);
                    }
                }   
             

  document.getElementById("btnPost").addEventListener("click", function () {
            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");
            }
            xhr.open("POST", "/jQueryAjax/postPersonInfor");
            var data = "name=" + document.getElementById("txtName").value + "&sex=" + document.getElementById("cboSex").value + "&address=" + document.getElementById("txtAddress").value;
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(data);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var txt = xhr.responseText;
                    console.log(txt);
                }
            }
        });

   document.getElementById("btnGet").addEventListener("click", function () {
            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");
            }
            xhr.open("get", "/jQueryAjax/getPersonInfor");
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var data = xhr.responseText;//获取xhr的返回值
                    var person = JSON.parse(data);//将字符串解析为js对象
                    console.log(person);
                    document.getElementById("txtName").value = person.name;
                    document.getElementById("cboSex").value = person.sex;
                    document.getElementById("txtAddress").value = person.address;
                }
            }
        });

同步与异步：
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时候返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消失返回时系统会通知进程进行处理，这样可以提高执行的效率。
下面的代码图片是老师上课。

  /// XMLHttpRequest post异步
        /// </summary>
        /// <returns></returns>
        public ActionResult postPersonInfor(FormCollection form)
        {
            string name = form["name"];
            string sex = form["sex"];
            string address = form["address"];
            return Content(name + "&" + sex + "&" + address);//Content(string)返回字符串
        }
        #region   
        public ActionResult postPersonInfor1()
        {
            string name = Request.Form["name"];
            string sex = Request.Form["sex"];
            string address = Request.Form["address"];
            return Content(name + "&" + sex + "&" + address);//Content(string)返回字符串
        }
        #endregion

        /// <summary>
        /// XMLHttpRequest get 异步
        /// </summary>
        /// <returns></returns>
        public ActionResult getPersonInfor()
        {
            string str = "{ \"name\": \"张三\",\"sex\": \"男\",\"address\":\" 北京大学\"}";
            return Content(str);//Content(string)返回字符串
        }