JS——Ajax总结

最新推荐文章于 2024-10-21 15:15:00 发布

gxyqn626

最新推荐文章于 2024-10-21 15:15:00 发布

阅读量173

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/gxyqn626/article/details/83050630

版权

JS 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

一、XMLHttpRequest(Ajax技术的核心)

XHR对象作用：与服务器交互(向服务器发送请求和解析服务器响应)的过程中提供流畅的接口。能够以异步的方式从服务器获取更多的信息，用户单机后，可以不必刷新页面也能获取到新数据。即用XHR对象取得新数据，然后通过DOM操作将新数据插入到页面中。Ajax技术就是无须刷新页面就可以从服务器取得数据，但不一定是XML数据。

IE5是第一款引入XHR的浏览器，它是通过一个Active对象实现的。如果要用MSXML库中的XHR对象，要编写一个函数。

其他的几款浏览器支持原生的XHR对象，在这些浏览器中创建XHR对象要像下面这样使用XMLHttpRequest()函数

var xhr = new XMLHttpRequest();

XHR的用法

调用的第一个方法：open()，三个参数。要发送的请求的类型（get/post），请求的URL，是否异步发送请求的布尔值.

xhr.open("get","example.php",false);
//调用open()方法只是启动一个请求以备发送，并不会发送真正的请求
//URL相对于执行代码的当前页面（也可以使用绝对路径）

要发送特定的请求，调用send()方法

xhr.open("get","example.txt",false);
xhr.send(null);

send()方法接受一个参数，这个参数是作为请求主体发送的数据。

如果不需要通过请求主体发送数据，必须传入Null,当调用函数后，请求会被分派到服务器。

在收到响应后，响应的数据会自动填充XHR对象的属性。

XHR的相关属性：

1、responseText：接收响应数据。

2、responseXML:接收响应数据。如果响应的内容类型为“text/xml”“application/xml”，这个属性中将会保存包含着响应数据的xml dom文档。

XML:

</person>

JS:

var xmldom = xhr.responseXML;//属性中保存着XML DOM文档

var persons = xmldom.getElemenstByTagName('person');

使用responseText方式，接收的便是纯文本字符串，如：“<person><id>1</id></person>";

无论内容类型是什么，响应主体的内容都会保存到responseText属性中，而对于非XML数据而言，responseXML属性值将为null。

3、status:响应的HTTP状态

4、statusText:HTTP状态的说明

接收到响应后，首先要检查status属性，以确定响应已经成功的返回。

xhr.open("get""example.php",false);
xhr.send(null);
if((xhr.status > = 200 && xhr.status < 300 )||xhr.status ==304)
{
    alert(xhr.responseText);
}
else
{
    alert("Request is unsuccessful:" + xhr.status );
}

当我们的请求是异步进行时，我们可以检测XHR对象的readyState属性，这个属性表示了当前的活动阶段。

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

1：启动。已经调用open()方法，尚未调用send()方法

2：发送。已经调用send()方法，但未接收响应

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

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

Get请求

用于向服务器查询某些信息。

可以将查询字符串参数追加到url的末尾，以便将信息发送给服务器。对于XHR而言，位于传入open()方法的url末尾的查询字符串必须要经过正确的编码

查询字符串中的每个参数的名称和值都必须使用encodeURICompent()进行编码，才能放到URL的末尾

所有的名值对必须由&分割

xhr.open("get","example.php?name1=value1&name2=value2",true);

//实现

function addURLParam(url,name,value)//将字符串参数添加到url中
{
    url +=(url.indexOf("?")==-1?"?":"&");//首先检查URL是否包含？如果没有就添加一个？如果有就添加一个&
    url +=encodeURIComponent(name)+"="+encodeURIComponent(value);//将参数的值进行编码
    return url;
}

//构建请求url的实例
var url = "example.php";

url = addURLParam(url,"name","Nicholas");
url = addURLParam(url,"book","JavaScript");

xhr.open(get,url,false);

Post请求

Post请求的频率仅低于Get请求，用于向服务器发送应该被保存的数据。

Post请求把数据作为请求的主体提交，可以包含很多数据并且不限格式。

xhr.open(post,"example.php",true);

发送post请求的第二步就是向send()方法中传入数据。可以传入任何想发送到服务器的字符串，也可以传入XML DOM文档。

服务器对Post请求和提交Web表单的请求不会一视同仁，所以我们要对Post请求进行解析

我们可以用XHR来模仿表单的提交：

将Content-Type头部信息设置为application/x-www-form-urlencoded——>表单提交时的内容类型

以适当的格式创建一个字符串,若需要将页面中表单的数据序列化，再通过XHR发送到服务器，可以用serializr()函数来创建

function submitData()
{
    var xhr = createXHR;
    xhr.onreadystatschange = function()
    {
        if(xhr.readyState ==4)
        {
            if((xhr.status>=200&&xhr.status<300)||xhr.status ==304){
                alert(xhr.responseText);}
            else{
                alert("Request was unsuccessful : "+xhr.status);
            }
        }
    }
    xhr.open(post,"example.php",true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    var form = document.getElementById("user-info");
    xhr.send(form);
}