javascript之AJAX学习

时间:2023-03-08 17:48:05

1.AJAX即Asynchronous Javascript+XML。能够向服务器请求额外的数据而无需卸载页面。  AJAx技术的核心是XMLHttpRequest对象(XHR)。

2.AJAX只能向同一个域中使用相同端口和协议的URL发送请求。

3.创建要给AJAX的过程:

  1.创建一个XHR对象。 ie7+后只需要var xhr=new XMLHttpRequest()

 2.通过open()方法建立一个发送请求。 xhr.open(type,url,false);  false表示是否发送异步请求。

  3.发送请求。xhr.send(null)。这里send方法接受一个参数,即要作为请求主体发送的数据。如果不需要通过请求主体发送请求,则必须传入null。调用send()后,请求就会被分派到服务器。

  由于这次请求是同步的,javascript代码会等到服务器响应之后再继续执行,收到响应后,响应的数据会自动填充XHR对象 的属性, 相关的属性如下:responseText:作为响应主体被返回的文本。

              responseXML:如果响应的内容类型是"text/xml"或”application/xml“这个属性中将保存着包含响应数据的XML DOM文档。

             status:响应的http状态。

             statusText:http状态的说明。

  在接收到响应后,第一步是检查status属性,已确认响应已经成功返回。一般来说可以将http状态码为200作为成功的标志。此外状体码为304表示请求的资源并没有被修改。

if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
alert(xhr.responseText);
}
else{
alert("unsuccessful"+xhr.status);
}

  更多时候是要发送异步请求的,才能让javascript继续执行而不必等待响应。此时可以检测XHR对象的readyState属性。该属性表示请求/响应过程的当前活动阶段。该属性可取的值如下

    0:未初始化,尚未调用open()方法。

    1:启动。已经调用open()方法,但尚未调用send()方法。

    2:发送。已经发送send()方法,但尚未收到响应。

    3:接收。已经接收到部分响应数据。

    4:完成。已经接收到全部相应数据,而且已经可以在客户端使用了。

  只要readyState属性值由一个值变成另一个值,都会触发一次readyStateChange事件。但需要在调用open()方法前就指定哦那readystatechange事件处理才能确保跨浏览器兼容性。

  每个http请求和响应都会带有相应的头部信息。使用setRequestHeader()方法可以设置自定义的请求头部信息。接受两个参数:头部字段的名称和头部字段的值。建议使用自定义的头部字段名称。

xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
alert(xhr.responseText);
}
else{
alert("unsuccessful"+xhr.status);
}
}
}

GET请求:

 GET是最常见的请求类型,最长用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到URL的末尾,以便将信息发送给服务器。使用GET请求时会经常发生一个错误。即查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用encodeURLComepotent进行编码。且所有名-值对儿都必须由 & 分割。 

  以下方法可辅助向url末尾添加查询字符串参数:

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

POST请求:

  post请求通常用于向服务器发送应该被保存的数据。post请求应该把数据作为请求的主体提交,请求主体可以包含非常多的数据。

  默认情况下,服务器对post请求和提交的web表单的请求并不会一视同仁。因此服务器端必须有程序来读取发送过来的原始数据,并从中解析出有用的部分。不过可以使用XHR来魔法表单提交时的内容类型。其次以适当的格式创建一个字符串。  如果需要将页面中表单的数据进行序列化,然后再发送给服务器,可以使用serialize()来创建这个字符串。

  xhr.open("post","postexample.php",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var form=document.getElementById("user-info");
xhr.send(serialize(form));//将ID为user-info的表单中的数据序列化后发送给服务器

  FormData类型

  FormData类型为序列化表单及创建与表单格式相同的数据提供了便利。

  下面的代码创建了一个FormData类型

 var data=new FormData();
data.append("name","value");

  使用FormData的便利是不必明确的在XHR对象上设置请求头部,XHR对象能够识别传入的数据类型是FormData的实例,并配置适当的头部信息。

总结起来代码如下:


var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
alert(xhr.responseText);
}
else{
alert("unsuccessful"+xhr.status);
}
}
}
function addURLParam(url,name,value){
url+=(url.indexOf("?")== -1 ? "?":"&");
url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
return url;
} xhr.open("post",url,true);
//xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var form=document.getElementById("user-info");
xhr.send(new FormData(form));//将ID为user-info的表单中的数据序列化后发送给服务器
 

总结创建AJAX的步骤:

1.创建XMLHttpRequest对象,

2.创建一个http请求,并指定该http请求的方法,url,及请求方式。

3.创建响应http请求状态变化的函数。

4.发送http请求。

5.获取异步调用返回的数据。

6.使用js和dom实现局部刷新。