目录
  • 前言
  • 正文

    • 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 JL } 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大致用法

  1. 创建Xv 3 \ V 4 vMLHttpRequest 对象
  2. 发送请求使用open()send()方法
  3. 获得来自服务器的响应,使用XMLHk 4 G attpRequest 对象的responseTextresponseXML属性
  4. 服务器响应的数据的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对象的responseTextresponseXML属性。= 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时。如果asyncfalse,把代码放到% 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是什么?

  1. AJAX = Asynchronous JavaScript and XML(异r c O Q @ N n ( g步的 JavaScript 和 XML)。

  2. Ajax 是一种用于创建快速动态网页的技术。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的f y C T + @技术。

  3. Ajax是采用了异步请求的方式,解决了页面无刷新式提交的问题,改善了页面的用户体验效果;常用自动L 5 D @ e J v s完成i | (提示,注册时用户名重复性校验。

  4. 常用的Ajax框架& 1 X k d: Jquery中的ajax

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


2. Ajax的优缺点?(请谈一下你对Ajax的认识)

优点:(为什么要使用Ajax?)

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

缺点:

  1. 存在浏览器兼容性问题。 Ajax大量的使用了javascript和ajax引擎,这些取决V } f F o于浏览器的支持,在编写的时候要考虑对浏览器的兼容性。
  2. 破坏了浏览器的前进、后退功能。 AJAX只是局部刷新,所以页面的后退按钮是没有用的。
  3. 对搜索引擎不友好。 搜索引擎会屏蔽掉所有js代码,所以ajax载入的的信息不会被搜索引擎收录。
  4. ( / 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的工作原理

  1. 创建? ` 0 ` d ( x u {ajax对] u , k ( +XMLHt* C ) ` e 6 Q a $tpRequest/ActiveXObjectI * D ](Microsoft.XMLHttp)
  2. 判断数据传输方式 GET/POST
  3. 打开链接 open()
  4. 发送 su [ A x f Y Nend()
  5. 当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属性


后记

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

发表回复

您的电子邮箱地址不会被公开。