Ajax第一阶段学习

Posted 2021-04-15 Java引导者

最近在学习ajax，下面整理了一下学习的内容，希望对大家有用，若有不当的地方，欢迎指正！ 先来看看为什么要用ajax，也就是同步和异步是什么：

同步和异步

同步的意思就是客户端提交表单，发起请求后需要一直等待服务器端的响应，收到服务器端的响应后需要重新载入页面。 而有了ajax，则可进行异步交互，比如不会提交整个表单后等待服务器响应再刷新页面，而是填写的过程中，通过ajax的机制，就可以把已经填写的部分提交给服务器，服务器进行处理，而这个过程中可以继续填写后面的内容，服务器发送回响应只会刷新页面的部分内容（利用javascript操作DOM进行局部刷新），而不是重新载入整个页面。其实就是为客户机（网页中常为JavaScript）代码提供了一种发送HTTP请求的方式。通常提交请求都是以表单的形式发送，获取响应要刷新整页，而ajax则是按需发送，只刷新返回的数据。

传统的Ajax的基本操作步骤

Ajax指异步的JavaScript和XML，JS无需等待服务器响应，而是在继续执行脚本内容，响应就绪后对响应进行处理。若是同步，则JS代码会收到服务器的响应后再继续执行。ajax是通过XMLHttpRequest对象在客户端和服务器端进行数据交换的。

1.  创建XMLHttpRequest对象

<script type="text/javascript">
    function CreateXMLHTTP() {
        var objXmlHttp;
        // 检测MSXMLHTTP版本，为了兼容IE各个版本
        var activeKey = new Array("MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP");
        if (window.ActiveXObject) {
            for (var i = 0; i < activeKey.length; i++) {
                try {
                    objXmlHttp = new ActiveXObject(activeKey[i]);
                    if (objXmlHttp != null)
                        return objXmlHttp;
                }
                catch (error) {
                    throw new Error("您的浏览器版本过低，请更新浏览器");
                }
            }
        }
        else if (window.XMLHttpRequest) {
            objXmlHttp = new XMLHttpRequest();
        }
        return objXmlHttp;
    }
</script>

2.  向服务器发送请求 

objXmlHttp.open(method,url,async);
objXmlHttp.send();

• method：请求的类型有GET或者POST;

• url:文件在服务器上的位置；

• async:true（异步）或false(同步).

3.服务器响应 

在收到响应后，响应的数据会自动填充XHR对象的属性： 

• XHR.responseText：服务器返回的文本数据 

• XHR.responseXML：服务器返回的XML格式的数据 

• status：服务器返回的状态码。响应的HTTP状态： 
  

• - 200: “OK”，响应成功返回 
  - 304：请求的资源未被修改，可使用浏览器中的缓存版本 
  - 404:未找到页面 

• statusText：HTTP状态文本说明 

• 同步的时候应当检查status的值后来决定下一步的操作：
  

if(xhr.status>=200 && xhr.status<300 || xhr.status=304){
    //do something
}else{
    alert("request was unsuccessful: "+xhr.status);
}

4.   客户端响应事件onreadystatechange 

XMLHttpRequest对象的三个重要属性：

• onreadystatechange:存储函数（或函数名），每当readystate属性改变时，就会调用该函数。

• readystate：有5个状态，0：请求未初始化，1：服务器连接已建立，2：请求已接收，3：请求处理中，4：请求已完成，且响应已就绪。

• status:有200：“OK”，404：未找到页面。

xhr.onreadystatechange=function(){
    if(xhr.readyStatus==4){
        if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
            //do something
        }else{
            alert("request was unsuccessful: "+xhr.status);
        }
    }
};

5.终止异步 

xhr.abort()：调用该方法取消异步请求，XHR对象会停止触发事件，并且不再允许访问任何与响应有关的对象属性。 在终止请求后，应对XHR对象释放引用。

HTTP头部

浏览器在发送XHR请求的同时也会默认发送一些头部信息，浏览器能够显示的字符集（Accept-charset）、当前页面设置的任何Cookie等。也可以自定义发送信息，通过调用XHR.setRequestHeader(header,value)向请求添加头部。该方法应当放在open之后send之前。 XHR对象的getResponseHeader()和getAllResponseHeaders()可用于获取响应的头部信息

1. GET请求 

常用于向服务器查询某些信息，可将查询字符串参数追加到url末尾。必须对查询字符串进行encodeURIComponent()编码，具体来说必须对参数名和参数值都进行编码才能附加到url后面。 向现有url追加查询字符串参数：

function addURLPara(url,name,value){
    url += (url.indexOf("?") == -1 ? "?":"&");
    url += encodeURIComponent(name)+"="+encodeURIComponent(value);
    return url;
}

2.POST请求 

用于向服务器发送应当被保存的数据（修改服务器端数据），数据是请求的主体。 使用POST方式： 
---无法使用缓存文件（get通常会使用缓存？） 
---向服务器发送大量数据 
---发送包含未知字符的用户输入 
    在send方法中传入要发送的数据（字符串或文档），表单数据序列化，通过XHR发送到服务器：

function submitData() {
    var xhr = createXHR();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                //do something
            } else {
                alert("request was unsuccessful: " + xhr.status);
            }
        }
        ;
    }
    xhr.open("post", "url", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //表单提交时的内容类型，如果提交的是表单数据必须要写这    个                                                                             
    var form = document.getElementById("user-info");
    xhr.send(serialize(form));//表单序列化
}

使用该方式必须设置自定义请求头部信息Content-Type，以说明请求的内容类型。这样服务器就会根据请求的内容类型来解析表单中的数据。 在通过post方式请求表单中，在open和send之间，要添加

request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”) 
 

如果不设置content-type头部，那么发送给服务器的数据就不会出现在$_POST超级全局变量中。

传送的数据格式

 Ajax传输的数据格式有html、XML、JSON三种常见数据格式，下面简单汇总下每种数据格式的优缺点。

1.HTML 

• HTML由一些普通文本组成。如果服务器通过XMLHTTPRequest发送HTML，文本将存储在responseText属性中。

• 从服务器端发送的HTML的代码在浏览器端不需要用JavaScript进行解析。

• 可以直接使用innerHTML属性把服务器传输过来的HTML文本插入到页面中。

2.XML

• XML是一种通用的数据格式

• 不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记

• 利用DOM可以完全掌控文档

3.JSON

• JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式。

• JSON的规则很简单：对象是一个无序的键值对的集合。一个对象以“{” 左括号开始，以“}”右括号结束。每个“名称”后跟一个“：”(冒号)；键值对之间用“，”（逗号分隔 ）

$.ajax({
   type: 'post',
   url: 'aaa/bbb.do',
   contentType: 'application/json;charset=utf-8',
   data: '{"name": "uname", "age": 18}',
   success: function (data) { //返回json结果
       alert(data);
   }
});

• JSON只是一种文本字符串。它被存储在responseText属性中

• 函数eval会把一个字符串当作它的参数。然后这个字符串会被当作JavaScript代码来执行。因为JSON的字符串就是由JavaScript代码构成的所以它本身是可执行的

var data = new FormData();
data.append(“key”,”value”);
"name":value
var jsondata='{"staff":[{"name":"anna","age":20},{"name":"mike","age":10},{"name":"lily","age":30}]}'; //注意这个json字符串要放到同一行;服务器端的返回的数据应该写成这样一个json对象字符串
var jsonobj=eval('('+jsondata+')'); //eval使用这种方式解析
alert(jsonobj.staff[0].name);
 

到这里，我们介绍了同步和异步、传统的Ajax的基本操作步骤、Http头部信息以及Ajax传输的三种数据格式，希望同学们看了后，能有所收获，同时欢迎大家留言！