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);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值