javascript之AJAX学习

2023-03-05 23:00:37

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状态码为２００作为成功的标志。此外状体码为３０４表示请求的资源并没有被修改。

if(xhr.status>=200 && xhr.status<300 || xhr.status==304){

                alert(xhr.responseText);

            }

            else{

                alert("unsuccessful"+xhr.status);

            }

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

　　　　０：未初始化，尚未调用open（）方法。

　　　　１：启动。已经调用open（）方法，但尚未调用ｓｅｎｄ（）方法。

　　　　２：发送。已经发送ｓｅｎｄ（）方法，但尚未收到响应。

　　　　３：接收。已经接收到部分响应数据。

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

　　只要readyState属性值由一个值变成另一个值，都会触发一次readyStateChange事件。但需要在调用open（）方法前就指定哦那readystateｃｈａｎｇｅ事件处理才能确保跨浏览器兼容性。

　　每个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);

            }

        }

    }

ＧＥＴ请求：

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

　　以下方法可辅助向ｕｒｌ末尾添加查询字符串参数：

  function addURLParam(url,name,value){

            url+=(url.indexOf("?")== -1 ? "?":"&");

            url+=encodeURIComponent(name)+"="+encodeURIComponent(value);

            return url;

        }

ＰＯＳＴ请求：

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

　　默认情况下，服务器对post请求和提交的web表单的请求并不会一视同仁。因此服务器端必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。不过可以使用ＸＨＲ来魔法表单提交时的内容类型。其次以适当的格式创建一个字符串。　　如果需要将页面中表单的数据进行序列化，然后再发送给服务器，可以使用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实现局部刷新。

码农公寓

相关文章