1.什么是Ajax

Ajax是Asynchronous JavaScript and XML的缩写,这一技术能从服务器请求额外数据而无需卸载页面。传统的HTTP请求流程大概是这样的,浏览器向服务器发送请求-〉服务器根据浏览器传来数据生成response-〉服务器把response返回给浏览器-〉浏览器刷新整个页面显示最新数据,这个过程是同步的,顺序执行。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求)从服务器获取数据,这里的异步是指脱离当前浏览器页面的请求、加载等单独执行,这意味着可以在不重新加载整个网页的情况下,通过JavaScript接受服务器传来的数据,然后操作DOM将新数据对网页的某部分进行更新,使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了。

2.XMLHttpRequest对象

Ajax的核心是JavaScript对象XmlHttpRequest,这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口。XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

XHR对象由IE5率先引入,在IE5中XHR对象是通过MSXML库中一个ActiveX对象实现的,根据IE版本不同可能会遇到不同版本XHR对象,而IE7+与其它现代浏览器均支持原生的XHR对象,在这些浏览器中我们只需使用XMLHttpRequest构造函数就可以构造XHR对象,因此一个浏览器兼容的创建XHR对象的函数写法大概是这个样子

 <script type="text/javascript">
function createXHR(){
var xhr = null;
try {
// Firefox, Opera 8.0+, Safari,IE7+
xhr = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
xhr = null;
}
}
}
return xhr;
}
</script>

3.XmlHttpRequest对象用法

XHR对象有两个重要方法 open与send

在使用XHR对象时要调用的第一个方法是open方法,调用方式:xhr.open(“get”,”default.aspx”,true); 这段代码会针对default.aspx页面发送get请求,关于这段代码有三点需要注意:

1. URL是相对于当前页面的路径,也可以使用绝对路径

2. 调用open方法并不会真正的发送请求,而是初始化一个请求准备发送

3. 只能向同一个域中使用相同协议和端口的URL发送请求,否则会因为安全原因报错

要想把请求发往服务器需要调用send方法,send方法接受一个参数,参数是请求主体要发送的数据,如果不需要发送数据则传入null,在调用send方法之后请求被发往服务器,如下

xhr.send(null);

请求发往服务器,服务器根据请求生成响应(Response),传回给XHR对象,在收到响应后相应数据会填充到XHR对象的属性,有四个相关属性会被填充:

1. responseText:作为响应主体被返回的文本

2. responseXML:如果响应内容的类型是”text/xml”或”application/xml”,这个属性将保存包含着相应数据的XML文档

3. status:响应的HTTP状态(200,404,500等)

4. statusText:HTTP状态说明

在收到响应后第一步是检查响应状态,确保响应是否成功返回(状态为200),如果成功responseText和responseXML可以被访问,为了确保响应有效,我们可以这样检查状态码

xhr.open('get','default.aspx,false'); //准备同步请求
xhr.send();
if(xhr.status>= && xhr.status< || xhr.status==){
//do something
}else{
//error handler
}

上面代码在发送同步请求的时候没问题,只有得到响应后才会执行检查status语句,但是在异步请求时,JavaScript会继续执行,不等生成响应就检查状态码,这样我们不能保证检查状态码语句是在得到响应后执行(实际上也几乎不可能,服务器再快一个HTTP请求也不会快过一条JavaScript执行数度),这时候我们可以检查XHR对象的readyState属性,该属性表示请求/响应过程中的当前活动阶段,每当readyState值改变的时候都会触发一次onreadtstatechange事件。

我们可以利用这个事件检查每次readyState变化的值,当为4的时候表示所有数据准备就绪,有一点我们需要注意:必须在open方法之前指定onreadtstatechange事件处理程序。

var xhr =createXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState == && xhr.status == ) {
setContainer('Original Ajax: ' + xhr.responseText);
}
}
xhr.open('get', 'ajax.aspx?action=getTime', true);
xhr.send();

我们可以在接受响应之前调用abort方法取消异步请求:xhr.abort();

4.HttpHeader

每个HTTP请求都会带有Header信息,XHR对象也提供了操作这请求Header和响应Header信息的方法,在默认情况下,发送HTTP请求还会发送下列头部信息

1. Accept:浏览器能够处理的内容类型

2. Accept-Charset:浏览器能够处理的字符集

3. Accept-Encoding:浏览器能够处理的压缩编码

4. Accept-Language:浏览器当前设置的语言

5. Connection:浏览器与服务器的连接类型

6. Cookie:当前页面的cookie

7. Referer:发送请求的页面的URI

可以使用setRequestHeader方法设置自定义的请求Header信息,这个方法接受两个参数:头部字段的名称,头部字段的值。要想成功发送头部信息,必须在调用open方法之后,调用send方法之前掉用setRequestHeader方法。

function getTime() {
var xhr = createXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState == && xhr.status == ) {
setContainer('Original Ajax: ' + xhr.responseText);
}
}
xhr.open('get', 'ajax.aspx?action=getTime', true);
xhr.setRequestHeader(myHeader,myValue)
xhr.send();
}

我们可以在服务器端接收自定义Header然后做响应操作。同时在服务器端也可以向浏览器发送额外的数据,在没有自定义信息的情况下我们可以得到默认response header

1. Date:响应时间

2. Server:服务器类型

3. Very:验证Encoding类型

4.X-Power-By:语言

5.Get和Post

GET请求时最常见的请求类型,用于向服务器查询信息,必要时可以将查询字符串参数放在URL尾部发送给服务器,如果参数有特殊字符必须正确编码。我们上面使用的例子都是使用GET请求,非常简单,向服务器询问数据,然后处理数据。

POST请求用于把数据作为主体向服务器提交,POST请求主体可以包含多种格式数据,在open方法第一个参数传入”POST”就可以初始化一个POST请求。发送POST请求第二步就是向send方法传输数据参数,参数可以是xml或者字符串,json等。

function getInfo() {
var xhr = createXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
setContainer('Original Ajax: ' + xhr.responseText);
}
}
xhr.open('post', 'default.aspx', true);
xhr.send('{name:"Byron",age:"24"}');
}

初探Ajax的更多相关文章

  1. 省市联动初探AJAX操作数据

    主要学习代码: List.html <script type="text/javascript"> function GetXhr() { return new XML ...

  2. AJAX初探,XMLHttpRequest介绍

    AJAX初探,XMLHttpRequest介绍 AJAX      AJAX = Asynchronous JavaScript and XML. 异步的JavaScript和XML.      AJ ...

  3. ajax初探01

    1.为什么使用ajax ajax使用异步处理模型,意味着在浏览器等待数据加载期间,用户可以做其他事情 在页面正在加载时使用ajax:使用ajax,浏览器可以向服务器请求一些数据,并且一旦数据请求发出, ...

  4. ajax初探--实现简单实时验证

    学习技术最好的方式就是在做中学,做一个小demo来对前端输入进行实时验证. 利用ajax技术和Sevlet技术来实现,使用原生的js. 源码可访问,我的Github 什么是ajax Ajax 即&qu ...

  5. JavaScript初探之AJAX的应用

    什么是 AJAX1. AJAX = 异步 JavaScript 和 XML. 2. AJAX 是一种用于创建快速动态网页的技术. 3. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步 ...

  6. JavaScript初探系列之Ajax应用

    一 什么是Ajax Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml.也就是异步请求更新技术.Ajax是一种对现有技术的一种新的应用,不 ...

  7. Ajax初探

    一.AJAX准备知识:JSON 1.stringify与parse方法 2.和XML的比较 二.AJAX简介 AJAX常见应用情景 AJAX的优缺点 优点: 三.jQuery实现的AJAX $.aja ...

  8. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  9. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

随机推荐

  1. Android——旋转屏幕导致Activity重建解决方法

    Android开发文档上专门有一小节解释这个问题.简单来说,Activity是负责与用户交互的最主要机制,任何“设置”(Configuration)的改变都可能对Activity的界面造成影响,这时系 ...

  2. 关于 htonl 和 ntohl 的实现

    因为需要直接处理一个网络字节序的 32 位 int,所以,考虑用自己写的还是系统函数效率更高.然后又了下面的了解. 首先是系统函数 htonl ,我在 kernel 源码 netinet/in.h 找 ...

  3. checking for tgetent()... configure: error: NOT FOUND!

    今天centos出现了下面的异常: checking for tgetent()... configure: error: NOT FOUND! You need to install a termi ...

  4. Manacher算法

    Manacher算法是求回文串最高效的算法,能在线性时间内求出以每一个字符为中心的最长回文串.   首先,我们都能想出$O(N^2)$求出每一个字符为中心的最长回文串的算法.那么我们考虑这样一种情况. ...

  5. UVA1395 Slim Span(枚举最小生成树)

    题意: 求最小生成树中,最大的边减去最小的边 最小值. 看了题解发现真简单=_= 将每条边进行从小到大排序,然后从最小到大一次枚举最小生成树,当构成生成树的时候,更新最小值 #include < ...

  6. javascript之查找数组中最小/最大的数

    实现原理:和数组的顺序查找很类似,都是逐个数据的比对. 废话不多说~ 代码如下: /* * 参数说明: * array:传入数组 ,例如:var arr = [5,7,66,78,99,103,126 ...

  7. IIS Express 外部访问

    http://blog.csdn.net/zhangjk1993/article/details/36671105

  8. win7 中maven安装

    1. 下载Maven 下载地址为:http://maven.apache.org/download.html,现在最高的版本为3.0.2,在win7下载文件为:apache-maven-3.0.2-b ...

  9. 自定义JSP标签入门

    1.编写一个实现Tag接口的java类 package TagDemo; import javax.servlet.http.HttpServletRequest; import javax.serv ...

  10. JVM内存简单理解

    1.首先简单说一下CPU与内存之间的关系 CPU运转速度快,磁盘的读写速度远远不及CPU运转速度,所以设计了内存来缓冲CPU等待磁盘读写:随着CPU的发展,内存读写也远远跟不上CPU的读写速度,CPU ...