Ajax基础学习笔记一

1、  定义：Ajax（AsynchronousJavaScript and XML）异步的通信JS和XML

        允许浏览器和服务器通信而无须刷新当前页面的技术。

2、  与传统WEB模型的比较

        传统WEB模型：客户端向服务器发送请求，服务器返回整个页面；

        Ajax模型：数据在客户端和服务器端独立传输，服务器不再返回整个页面。

3、  Ajax本质是XMLHttpRequest对象

        XMLHttpRequest对象：是JS的一个扩展，可以使网页和服务器进行通信，是Ajax应用的最佳选择。通常将Ajax作为XMLHttpRequest的代名词。

    3.1  XMLHttpRequest对象的方法：

        abort();-------->停止当前请求

        getAllRequestHeader();------->将HTTP此次请求的所有响应首部作为键/值对返回,要注意的是返回值是个string

        getResponseHeader(“header”);

        open(“method”,”url”);------->准备请求,该方法可以添加其他参数：比如异步参数，用户名，密码等。当然异步调用是Ajax的优势之一。

            例如：open(sting method, string url, boolean asynch, string username,string password)

            当asynch为true时调用完后会立即返回，如果为false就会直到接收到响应才会返回，这不会影响回调函数的多次执行，浏览器后台也是多线程的，同步只会阻止前端页面的响应。

        send(content);------>发送请求。

            可选的content参数可以是一个DOM对象，一个输入流，一个字符串，content会作为请求体的一部分发送到服务器Server，一般只在Post方法下才会使用。Get请求不需要请求体。

        setRequestHeader(“header”,”value”);

            此方法必须在open后面调用，作用是设置在HTTP请求消息中设置一个首部key/value对。GET请求方式下一般不用设置，但是在POST方式下需要设置一个Content-Type信息：XMLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");如果需要利用ajax上传文件，则应该这样设置：XMLHttpRequest.setRequestHeader("Content-Type","mulipart/form-data");

 

    3.2  XMLHttpRequest对象的属性：

        onreadystatechange:该属性关联一个js回调函数，当readyState属性值改变时就会调用一次。

        readyState:http的请求状态，只能有5个可供选择的值：

            0：未初始化；1：正在加载；2：加载完成；3：交互中；4：交互完成。

            注：XMLHttpRequest对象刚new出来时，readyState的值为0.

        responseTest:服务器Server的一个响应，返回的是一个字符串。

        responseXML:代表从服务器Server返回的一个XML格式的数据，可以直接作为DOM对象。

        status:Http响应中的响应码。只有当响应码为200时表示响应成功，不是200不用处理。

            另外不成功的响应包括（304：没有被修改，读取的是缓存；403：禁止访问；404：没有找到NotFound；500：内部服务器出错。）

        statusText:Http协议中跟在响应码后面的说明串。例如200，后面是OK；400后面是Not Found。

4、Ajax的post的请求例子

var url = “../jsp/formService”;
var nameValue = trim(document.formAddForm.name.value);
xhr.open(“POST”,”url”);
xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded);
xhr.send(“method=name_isExist” + ”&name=” + nameValue);