前言
正文
- Ajax是什么东西？
- 实现核心/工作原理：XMLHttpRequest对象
  - XMLHttpRequest大致用法
  - 创建XMLHttpRequest对象
- 发送请求
- 服务器响应
  - 1. responseText属性
  - 2. responseXML属性
- 数据处理
  - 1. r= M ! 5 NeadyState 属性
  - 2. onreadystatechange 事件属性
  - 3. status 属性
- Cal) h H $ _ d nlback 函数（回调函数）
- 面试题
  - 1. Ajax是什么？
  - 2. Ajax的优缺点？（请谈一下你对Ajax的认识）
  - 3. HTTP状态码
  - 4. Ajax的工作原i H 1 k理
  - 5. Ajax的最大的特点? 5 v D _是什S s N z s么？
  - 6. 请介绍一下XmlHttpRequest对象？
  - 7. 在浏览器端如何得到服务器端响应的XMLy l v J数L } L I据
  - 8. XMLHttpRequest对象在IE和Firefox中创建方式有没有不同？
  - 9. 介绍一下XMLHttpRequest对象的常用方法和属性（回答的越多越好）
  - 10. Ajax技术体系的组成部分有哪些？
  - 11.i 6 5 g f AJAX应用和传统Web应用有什么不同？
  - 12. A/ Y [JAX请求总共有多少种CALLBACK
  - 13. Ajax和javascript的区别？2 x w H U
  - 14. 如果熟悉某种ajax框架，他可能会问到怎样在程序中使用这种框@ s v A V i =架。
  - 15. 编程题：写出一个简单的$.ajax()的t c /请求方式？（ JQuery 的 Ajax 模板）
- 成文参考资料
后记

前言

大家好呀，我是白墨，一个热爱学习与划水的矛盾体。

以o P P 7 # y ;前学习Ajax时老师只是在将JQuery的时L # i W E k 4 l候简单的用了一下，浅尝辄止。课后也没有深入去了解过，h ) z O :连使用都很不熟练。我m – j甚至一度以为Ajax是JQuery独0 Z c 5 . N x +有的东西…q d b…

今天重新学习了一下，总算理清楚了Ajax是什么东西，以及该怎么使用。

先简单做一个笔记加深记忆，搬运居多，未来深入了解以后再进行补充。

正文

Ajax是什么东西？

AJAX 可以在不重新加载整个页面的情况下与服6 – @ ? Y } C ;务器交u l ! y换数据并更新部分网页。

AJAX = Asynchronous JavaScript and XML（异E r M W步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

实现核心/工作原理：XMLHttpRequest对象

XMLHttpRequest 是 AJAf * ? l S t D c FX 的基础。

请求的发送与响应数据的接收都是使用XMLHj E J y \ 1 3ttpRequest 对象。

所有现代浏览器均支持 X3 J {MLHttpRequesW q j At 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest大致用法

创建Xv 3 \ V 4 vMLHttpRequest 对象
发送请求使用open()和send()方法
获得来自服务器的响应，使用XMLHk 4 G attpRequest 对象的responseText或responseXML属性
服务器响应的数据的v g ? ,处理，使用XMLHttpRequest 对象的onreadystatechange属性l A a ( )

创建XMLHttpRequest对象

创建 XMLHttpReque/ f 9 G / 0st 对象的语法：varm 8 t ^ Oiable=new XMLHttpRequest();

老版本的IE5和IE6使用 ActiveX 对象：variable=new ActiveXOU n { ibject("Microsoft.XMLHTTP");

所以如果想兼容IE5 和 IE6 需要先判断浏览器版本再创建相应的对@ % f ;象。（话说这么老的浏览器真的需要兼容吗？）

var xmlhttp;
if (window.XMLHttpRequest){ //判断浏览器版本
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();//创建XMLHttpRequest对象
}2 [ W ~ N Z W A {else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsor N x 5 6 Yft.XM7 K % | _ 7 b ^LHTTP");//创建ActiveXO4 g % & xbject对象
}

发送请求

使用 XMLHttpRequest 对象的 open@ b 2 { ` ` – 6 v() 和 send() 方法向服务器发送请求：

//GET 请求
xmlhttp.open("GET","test1.txt?key=value",true);
xmlhttp.send();

//POS6 v I J 8 \ FT 请求
xmlhttp.T & | Bopen("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","aT } 7 opplication/x-www-form-urlencoded");//请求头C N [
xmlhttp.senm ( }d("fname=Bill&lname=Gates");T x {//数据4 Q B R

方法与参数解释

方法	描述
`open(method,url,async)`	规定请求的类型、U ? 1 i X + OURL以及是否异步处理请求。 `method`：请求t [ D B + / c q !的类型；GET 或 POST `url`：文件在服务器上的位置 `async`：true（异步）或 false（同步）
`send(string)`	将请求发送到服务器。1 ( 2 V = ? ) `strin\ D mg`：仅用于 POST 请求，GET请求参数放在 U6 H $ 4 5 ,RL 中
`setRequestHeade} Q , mr(header,vC ( 4 M v Dalue)`	向请求添加 HTTP 头。 `header`: 规定头的名称 `value`: 规定头的值

AJAX 指的是g # ? ~异步 JavaScript 和 XML（Asyn$ l ; ; ! * &chronous JavaScript an) $ Ed XML）。
XMLHttpRequest 对象如果要用于 AJAXP J & 8 I 的话，其open()方法的async参数必须设置为true。
所以XMLHttpRequest是实现AJAX的技术，而不是AJAX，切勿弄混。

注：如果async参数设置为false，即为非异步，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

服务器响应

获得来自服务器的响应，主要使用XMLHttpRequest2 r o ? 0对象的responseText或responseXML属性。= 0 } X y = =

1. respoF v h 4 x `nseText属性

获得字符串形式的响应数据，直接作为字符串使用。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

2. reg T A % ZsponseXML属性

获得 XML 形式的响应数据，需要作为 XML 对象进行解析。

xmlDoc=xmlhttp.respone 6 9 K [ Y ^ n nseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARD J y M \TIST");
for (i=0;i<x.length;i++){
txt=txt + x[i].childNodes[0].nodeZ r ? LValue + "<br />";
}
document.@ / l | - ( z 7getElementById(x u q E"myDiv").innerHTML=t) 7 } Vxt;

数据处理

当请求被发送到服务器时，我R I Y & j j们需要执行一些基于r r l响应的任务，主要使用XMLHttpRequest对象的readyState属性和onreadystatechange事件属性。

1.a b , v , u T n = readyState 属性

readyState属性翻译过来是就绪V C 5状态，存有 XMLHttpRequest 的状态信息，从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接D = L $ 6 & /收

3: 请求处理中

4:` p m ; 请求已完成，且响应已就绪

每当readyState改变时，就会触发onreadystatechange事件，所/ w ] . r N X J L以这两个要结合使用，下面介绍 onreadystatechange 。

2. onreadystatechange 事件属性

onready{ 4 ^ m ] Istatechange事件用于存储函数（或T Q A Y Q + * –函数名），每当readyState属性改变时，就会调用该函数。
onreadystatechangeP H q + m Q 2事件会被触发 5 次（0 – 4），对应着readyState的每个变化。

3. status 属性

XMLHttpRequest 还有一个重要属性：status

status属性表示HTTP请求的返回状态{ G z码，因为 XMLHE P ~ a } TttpReqJ B $ = {uest 也是请求的一个网页，所以它的含义和传统网页相同。

200：正常返o k 9 D H Z回

404：找不到网页

500：服务器内部错误

接下来+ $ S } H z p结合使用：

//当使用 async=true 时，为onreadystatechange设置函数
xmlhttp.onreadystatechange=function(){f = S +
//当 readyState 等于 4 且状态为 200 时，表示响应已就绪
if (xmlhttR % d 7 X L w V \p.readyState==4 && xmlhttp.status==200){
document.geT l e v A o EtElementById("my, ~ % D u t ` FDiv"R L $ } & # _).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);//async=true
x_ } = y L J v e 9mlhttp.send();

注：异步才需要r p h r n } q使用onreadystatechange，即open()方法的async参数设置为true时。如果async为false，把代码放到% S F nsend()语句后( X K 1 e R面即可。

//当使用 async=false 时，代码直接往后放
x0 h G `mlhttp.open("GET","test1.txt",false);
xm] q [ | 2 ^ M Y (lhttp.send();
document.getElementById("E B , 2 h MmyDiv").innerHTML=xmlhttp.responseText;

到这里XMLHttpRequest已经学得差不多了。后面是补充内容。

Callback9 w X e Z x H D 函数（回调函数）

回调函数这玩意儿我还没搞清楚

但是并不影响我写文，哈哈哈哈哈哈

callback 函数是一种以参数形式传递给另一个函数的函数。

如果网站上存在( s ? \ $ U D多个 AJAX 任务，就应该为创\ H h P b ^ D建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

//该函数调用应该包含 Uc c ; p _ ORL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
function myFunctiM : qon(){
loadXMLDoc("/aja} D Hx/test1.txt",functioQ g # I k , L on(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getE\ h MlementById("myDiv").i~ 4 8 d J E X 3 AnnerHTML=xmlhttp.responseText;
}
});
}

>>W3S实例<<

面试题

1. Ajax是什么？

AJAX = Asynchronous JavaScript and XML（异r c O Q @ N n ( g步的 JavaScript 和 XML）。
Ajax 是一种用于创建快速动态网页的技术。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的f y C T + @技术。
Ajax是采用了异步请求的方式，解决了页面无刷新式提交的问题，改善了页面的用户体验效果；常用自动L 5 D @ e J v s完成i | (提示，注册时用户名重复性校验。
常用的Ajax框架& 1 X k d： Jquery中的ajax

总结：AJAX直译为异步的JavaScript和XML，是一种异步提交、局部刷新的网页编程技术。

2. Ajax的优缺点？（请谈一下你对Ajax的认识）

优点：（为什么要使用Ajax？）

改善用户体验。 局部刷新页面,减少用户心理和实际的等待时间,带来P S J ; O L f ^ o更好的用户体验。
减轻服务器的负担。 按需取数据，最大程度的减少冗余请求，降低服务器端处理开销。
基于xml标准化，并被广泛支持，不需安装插件等，进一步促进页面和数据的分离。

缺点：

存在浏览器兼容性问题。 Ajax大量的使用了javascript和ajax引擎，这些取决V } f F o于浏览器的支持，在编写的时候要考虑对浏览器的兼容性。
破坏了浏览器的前进、后退功能。 AJAX只是局部刷新，所以页面的后退按钮是没有用的。
对搜索引擎不友好。 搜索引擎会屏蔽掉所有js代码，所以ajax载入的的信息不会被搜索引擎收录。
对( / K h I _ q流媒体还有移动设备的支持不是太好等。

3. HTTP状态码

200 服务器成U 7 ! f e a功返回页面
404 请求的网页不存在
503 服务不可用

100-199 用于指定客户端相应的某些动作。
200-299p C v M 用于表示请求成功
300-399 用于已经移动的文件并且常被包含在定位头信息中指定– i , F ^ ~新的地址信息
400-499 用于支出客户端的错误
500-599 用于支持服务错误

41 } ; T [ w. Ajax的工作原理

创建? ` 0 ` d ( x u {ajax对] u , k ( +象 XMLHt* C ) ` e 6 Q a $tpRequest/ActiveXObjectI * D ](Microsoft.XMLHttp)
判断数据传输方式 GET/POST
打开链接 open()
发送 su [ A x f Y Nend()
当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（stE 4 Datus）200-300之间或者304（缓存）执行回调函数

5. AjaxZ T h f G )的最大的特点是什么？

Ajax可以实现异步提交、局部刷新，这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络e } U l h x C ) Z上发送那些没有改变过8 S , g [ x e 3 1的信息。

6. 请介绍一下XmlHttpRequest对象？

Ajax的核心是JavaScriptG s { $ g o q R对} ` * r象XmlHttpRequest，它是一种支持异步请求的技术。XmlHttpRequest可以使得程序员使用JavaScript向服务器进行b K 1 V n请求并处理响应，而不阻塞用户。通过XMLHttpReqX V e l L j J Vuest对象，Web开发人员可以在页面加载以后进行页面的局部更新。
AJAX开始流行始于Google在2005年使用的”Google Sugg6 ] * m ^ k Pest”。
“Google Suggest”就是使用XMLHttpRequest对象, t j x来创建动w d ! T 6 l态的Web接口：
当用户开始输入google的搜索框，Javasc, 1 X \ Y 1 uript发送用户输a \ 2入的字符到服务| m K 2 D | ^器，然后服务器返回一个建议列表。
XMLHttpRequest对象在IE5.0+, Safari 1.2, Mozil] ] & Ola 1.0/Firefox, Opera 8+ 和NetScapt7 开始被支持。

7. 在浏览器端如何得到服务器端响应的XMLa + , P数据

XMLHttpRequest对象的responseXMl属性

8. XMLHttpRequesT i 9 : # # G |t对象在IE和Firefox中创建方6 b = 5式有没有不同？

IE中通过new ActiveXObject()创建\ J o，Firefox中通过new XMLHttpRequest()创建

9. 介绍一下XMLHttpRequest对象的常用方法和属性（回答的越多越好）

open()方法：建立对服务器的调用。
send()方法：发送具体请求
abort()方法：停止当前请求
readyState属性：返回请求的状态
responseText属性：服务器端响应的文本
reponseXML属性：服务器端响应的XML
Status:服务R k O g器的HTTP状态码

10. Ajax技术体系的组成部分有哪些？

HTML，css，dom，xQ 3 e Jml，xmlHttpRequest，javascript

11. AJAX应用和传统Web应用有什么不同？

简洁陈述版：
在传统的Web应用的– / z P H { z D请求u $ i/响应为同步模式。即当服务器端在处理客户端请求时，客户端需要等待，直到服务器端响应返回后，客户端才能继续执行。
而AJAE { H q sX应用的请求/响Q F O应为异步模式，即当服L = Y + G C b务器端在处理客户端请求时，客户端无须等待可以x Q # 5继续执行；当服务器端响应返回后，客户端进行局部刷新。
详细说明版：
在传统的Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form然后GET或者POST数据到服务器% + 1 t端。用户需要点击”Submit”按钮来发送或者接受数据信息，然后等待服务( @ : Y u J [ ^ C器响应请求，页面重新加载。
因为服务器每次都会返回一F / 9 u G r O个新的页面，所以传统的t – #web应用有可能很Z v g ( d 0慢而且用户交互不友好。
使用AS . qJAX技术，就可以使Javascript通过XMLHttpRequest对象直接与服务7 r n ? C O器进行交互。
通过HTTP Request，一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，展示给用户的还是同一个页面，用户感觉页面刷新，也看不到到Javascript后台进行a T W的发送请求和接受响应。

12. AJAX请求总共有c % j多少种CALLBACK

Ajax请求总共有八种Callback

onSuccess
onu % | &Failure
onUninitialized
onLoading
onLoaC G 5 J z ^ded
onInteractive
onComplete
onException

13. Ajax和javascript的区别？

javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术，它利用了一系列相关的技术，其中就包括javascript。

14. 如果熟悉某种ajax框架，他可能会问到怎样在程序中% x j 3 5使用这种框架。

ASP.NETAjax集成了一套客户端O & | J y a 5 U脚本库使得与功能丰富的、基于服务器开发平台的ASP.NET结合在一起。其服务器端编程b 1 | 0模型相对于客户端编程模型较为简单，而且容易与现有的ASP.NET程序相结合，通常实现复杂的功能只需要在页面中拖几个控件，而不必了解深层次的工作原理，除此之外服务器端编程的ASP.NETAJAXControlToolkit含有大量的独立AJAX控件和对ASP.NET原有服务器控件的AJAX功能扩展。

15. 编程题：写出一个简单的$.ajax()的请求方式？（ JQuery 的 Aja[ 9 O R h v 9 zx 模板）

$.ajJ ` d g c 3 / Jax({
url:'http://www.baiduY H 9 [ v c a.com',	//请求地址
type/ * [:'POST',				//Post请求
data:data,					//请求的同时传递过去的数据
cache:b . O 5 - # 3 -true,					//是否高速缓存此页
header* l ) Z t ` 8 N 0s:{},
dataType:’json’,			//返回数据类型：xml/json/html/script…
beforeSeC $ 6 wnd:function(){},	//在发送请求前执行的函数
success:function(){},		//请求成功后的回调函数
error:function(){},			//请求失败时调用的函数
complete:function(){}		//请求完成后回调函数
});

成文参考资料, 3 e

W3S AJAX 教程Statue属性

后记

好啦，本文到此结束！如果对你有帮助，可以给我点赞+收藏+关注！你的鼓励是我更新的动力！

特别声明：本站所收录作品、热点评论等信息来源互联网，目的只是为了系统归纳学习和传递资讯所有作品版权归原创作者所有，与本站立场无关，图文源自网络，如有侵权，请联系删除！请联系我们邮箱：908164873@qq.com/电话：187-8421-3206，我们将做删除处理！

前言

正文