时间:2021-05-18
Ajax不是一种新的编程语言,而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下,与服务器交换数据。这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据。
XMLHttpRequest对象
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
在浏览器中创建对象(只支持IE7及更高的版本):
XHR的用法
首先要介绍的是open()方法。它接收3个参数:
•要发送的请求的类型(POST、GET等)
•请求的URL
•表示是否异步发送请求的布尔值
调用open()示例:
xhr.open("get", "index.jsp", false);
针对index.jsp的GET请求。URL相对于执行代码的当前页面;调用open()方法并不会真正发送请求,只是启动一个请求以备发送。
调用send()发送请求:
xhr.send(null);
send()接收一个参数,即要作为请求主体发送的数据。如果不需要通过请求主体发送数据,则必须传入null。
相应数据会填充到XHR对象的相关属性:
•responseText:作为响应主体被返回的文本
•responseXML:作为响应的内容类型是“text/xml”或“application/xml”
•status:响应的HTTP状态
•statusText:HTTP状态的说明
在接收响应后,首先检查status属性,确定响应已经返回,一般200作为成功的标志。状态码304表示资源没有修改,可以直接使用浏览器中缓存的版本。
为了接收到合适的响应,应该以如下方式检测两种状态码:
xhr.open("get", "index.jsp", false);xhr.send(null);if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {alert(xhr.responseText);} else {alert("Request was unsuccessful: " + xhr.status);}通过检测readyState属性,可以确定请求/响应过程的当前活动阶段。
•0:未初始化。未调用open()方法
•1:启动。已经调用open()方法,未调用send()方法
•2:发送。已经调用send()方法,未接收到响应
•3:接收。已经接收到部分数据
•4:完成。已经接收到全部数据,可以在客户端使用
readyState属性的值发生变化时,都会触发一次readystatechange事件。在调用open()之前指定onreadystatechange事件处理程序才能确保浏览器兼容性。
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("请求成功:" + xhr.status);}}};xhr.open("get", "index.jsp", true);xhr.send(null);在接收响应之前,可以取消异步请求:
xhr.abort();
HTTP头部信息
XHR对象提供了操作请求头部和响应头部信息的方法。
默认情况下,在发送XHR请求的同时,还会发送下列头部信息。
•Accept:浏览器能够处理的内容类型
•Accept-Charset:浏览器能够显示的字符集
•Accept-Encoding:浏览器能够处理的压缩编码
•Accept-Language:浏览器当前设置的语言
•Connection:浏览器与服务器之间连接的类型
•Cookie:当前页面设置的任何Cookie
•Host:发出请求的页面所在的域
•Referer:发出请求的页面的URL
•User-Aent:浏览器的用户代理字符串
使用setRequestHeader()可以设置自定义的请求头部信息。必须在调用open()方法之后,且在调用send()之前,调用
setRequestHeader():
调用getResponseHeader()并传入字段名称,可以取得相应的响应头部信息。getAllResponseHeader()取得包含所有头部信息的长字符串。
GET请求
GET用于向服务器查询某些信息。可以将查询字符串参数追加到URL的末尾,查询字符串中的每个参数的名称和值都必须使用encodeURIComponent()编码:
xhr.open("get", "login.jsp?name1=value1&name2=value2", false); addURLParam()接收三个参数:要添加参数的URL、参数的名称和参数的值。var url = "login.jsp";// 添加参数url = addURLParam(url, "username", "xxyh");url = addURLParam(url, "password", "xxyh123");// 初始化请求xhr.open("get", url, false);POST请求
POST请求用于向服务器发送应该被保存的数据。POST请求的主体可以包含非常多的数据,而且格式不限。
初始化请求:
xhr.open("post", "login.jsp", true); 首先将Content-Type头部信息设置为application/x-www-form-urlencoded,然后建立一个字符串格式。如果需要将页面中的表单数据进行序列化,然后再通过XHR发送到服务器,可以使用serialize()函数来创建这个字符串:xhr.open("get", "login.jsp", false);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");var form = document.getElementById("user-info");xhr.send(serialize(form));以上所述是小编给大家介绍的JavaScript中Ajax的深入理解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
首先看我们的源代码。复制代码代码如下:深入理解Javascriptconsole.log(this);深入理解Javascript我们知道,通过浏览器打开这个页
JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性。主要内容如下:理解JavaScript
扩展阅读c#基础系列1---深入理解值类型和引用类型c#基础系列2---深入理解String引言在上篇文章深入理解值类型和引用类型的时候,有的小伙伴就推荐说一说
JavaScript高级程序设计(第三版)(以下简称红宝书)22.3高级定时器中详细介绍了定时器setTimeout和setInterval,看完书后,深入理解
前言javascript中的this,constructor,prototype,都是老生常谈的问题,深入理解他们的含义至关重要。在这里,我们再来复习一下吧,温