Ajax学习笔记

---

Ajax学习笔记

• 用途
• 接收数据的使用方式
• 发送数据的使用方式

一、用途：

让我们能向服务器异步接收和发送数据，然后用JavaScript解析。

二、接收数据的适用方式

1、发起Ajax请求：创建一个XMLHttpRequest对象，调用其open和send方法；

function a(e){    var request = new XMLHttpRequest();    request.open("GET", e.target.innerHTML+".html");    request,send();}

2、使用一次性事件追踪请求的进度：使用二级事件，如onload()、onloadstart()、onloadend；

function a(e){    var request = new XMLhttpRequest();    request.onload = handlerOnload;    xxx;}function onload(){    xxx;}

3、探测和处理错误：响应错误事件或者try_catch；

function handlerError(){ xxx;  }ortry{    request.open("GET","http:");    request.send();}catch(error){ xxx; }

4、设置Ajax请求的标头：调用setRequestHeader()方法

request.setRequestHeader(“X-HTTP-Method-Override”，"DELETE");orrequest.setRequestHeader("Cache-Control","no-cache");//禁用内容缓存

5、读取服务器响应的标头

docment.getElementById("allheaders").innerHTML=request.getAllResponseHeaders();docment.getElementById("header").innerHTML=request.getResponseHeader("Content-Type);

6、发起跨源Ajax请求

request.open("GET"，“http://xxxx:8080”+ e.target.innerHTML)；

7、终止一个请求

request.abort();

三、发送数据的使用方式

1、向服务器发送表单数据

<form id="form" action=“http://xxx:8080/form”>    apples:<input name="apples" value="10" />    bananas:<input name="bananas" value="2" />   <button id="submit" type="submit">Submit Form</button><form/><script>    document.getElementById("submit").onclick=handlerButtonClick;    var XMLHttpRequest;    function handlerButtonClick(e){        e.preventDefault();        var form = document.getElementById("form");        var formData = "";//or var firmData = new FormData(form);        var inputElements = document.getElementById("input");        for(var i=0;i<inputElements.length;i++){            formData += inputElements.get(i).name + “=” + inputElements.get(i).value+"&";        }        request = new XMLHttpRequest();       request.onreadystatechange = handlerResponse;       request.open("POST",form.action);       request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//在使用FormData的情况下，可以使用默认请求头       request.send(formData);    }    function handlerResponse(){        if(request.readyState == 4 && request.statue =200){            docment.getElementById("results").innerHTML=requesr.responseText;        }    }</script>

2、发送json数据

var formData = new Object();for(var i=0;i<inputElements.length;i++){    formData[inputElements[i].name] = inputElement[i].value;}request.setRequestHeader("POST", "application/json");request.send(Json.stringify(formData));//将指定对象转化为String类型的json数据

3、向服务器发送文件

<input type="file" name="file" />

4、跟踪向服务器上传数据的进度

<progress id="prog" value="0" />var progress = document.getElementById("prog");var upload = request.upload;upload.onprogress = function(e){    progress.max = e.total;    progress.value = e.loaded;}upload.onload = function(e){    progress.max = 1;    progress.value = 1;}

5、覆盖服务器发送的MIME类型

request.overrideMimeType("text/html");

6、从服务器接收xml

request.overrideMimeType("application/xml");var xmlDoc = request.responseXML();

7、从服务器接收json数据

var data = Json.parse(request.responseText);