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;  }
or
try{
    request.open("GET","http:");
    request.send();
}catch(error){ xxx; }

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

request.setRequestHeader(“X-HTTP-Method-Override”，"DELETE");
or
request.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);