在最近一次面试上不幸被问到了,原以为很熟悉的东西你会发现你对他根本不熟悉!要说熟悉AJAX的话你需要毫不犹豫回答以下问题:
1 不同浏览器下ajax实现上的差异
2 一次ajax请求过程中有哪几种状态值,不同状态值之间含义是什么
3 ajax在跨域的情况下会出现什么状况,以及解决方案
4 ajax和后台数据交互时会有什么编码问题吗?
5 最后可以说说XMLHttpRequest2有什么新东西
怎么样?各位能轻易的答上以上4点,便可直接忽略此文,若是只能很含糊的说出1、2点的话,便硬着头皮看我这篇水文吧,呵呵。
:
ajax全称:Asynchronous JavaScript and XML 即传说中的“异步JavaScript和XML”,他是由html、js、Dom等组成,这一杰出的技术可以将笨拙的web界面变成交互性的ajax应用程序。
ajax是一种构建网站的强大方法,他让我们桌面上只剩一个浏览器的想法不再是空谈,不再是妄想,虽说不大可能。。。
曾经我们的页面需要等待,等待服务器响应,等待屏幕刷新,等待请求返回和生成新页面。ajax的出现就让web页面的等待变得不那么明显,虽说只是感觉罢了(跟和美女在一起似的,感觉很爽)。。。
在一般的web应用程序中,用户提交表单后将整个表单发送到服务器,服务器将它转发给后台脚步(.net,java,php),脚步执行结束后将生成的新的htm页面返回,这个过程中就会出现我们前面所说的等待:屏幕变得一片空白,等待返回数据在重新绘制,这种交互性就跟你和一个美女XXOO每隔10秒才能动一下似的,这种感受,这种交互性怎一个差字了得???
ajax基本就是把js对象XMLHttpRequest对象放在web表单和服务器之间,当用户提交数据时只是将数据提交给js,然后由js发送给服务器并获取返回数据修改页面,过程中不会出现闪烁、消失或者延迟,传说中的异步请求。。。
XMLHttpRequest
该js对象为ajax的核心,前面说过了XmlHttpRequest是一套可以在Javascript脚本语言中通过http协议传送或接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
首先我们来创建一个xml对象,需要注意兼容,我们先来个管中窥豹:
初始化
ajax的请求响应模型
ajax基本流程基本如下:
1 从web表单中获取所需数据(不用表单也行)
2 建立连接url
3 打开服务器连接
4 设置数据返回回调函数
5 发送请求
xmlHttp.open('GET', url, true);
xmlHttp.onreadystatechange = function (e) {};
xmlHttp.send(null)
open时,最后一个参数为true将建立异步连接,false将等待服务器响应
onreadystatechage 可以指定数据返回时回调函数
send便是发送请求,参数便是要传的参数,没有参数可以填null
我们来写段后台程序试试:
复制代码
1
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>title>
6 head>
7 <body>
8
9 body>
10 <script type="text/javascript">
11 var xmlHttp = false;
12 function createXMLHttpRequest() {
13 if (window.XMLHttpRequest) {
14 try {
15 xmlHttp = new XMLHttpRequest();
16 } catch (e) {
17 xmlHttp = false;
18 }
19 } else {
20 try {
21 xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
22 } catch (e) {
23 try {
24 xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
25 } catch (ee) {
26 xmlHttp = false;
27 }
28 }
29 }
30 }
31
32 createXMLHttpRequest();
33 if (xmlHttp) {
34 xmlHttp.open('GET', 'ajax.ashx', true);
35 xmlHttp.onreadystatechange = function (e) {
36 var tmp = xmlHttp.responseText;
37 var s = '';
38 }
39 xmlHttp.send();
40
41 }
42
43
44 var s = '';
45 script>
46 html>
复制代码
复制代码
1 <%@ WebHandler Language="C#" Class="ajax" %>
2
3 using System;
4 using System.Web;
5
6 public class ajax : IHttpHandler {
7
8 public void ProcessRequest (HttpContext context) {
9 context.Response.ContentType = "text/plain";
10 string name = context.Request.QueryString["name"] == null ? "" : context.Request.QueryString["name"].ToString();
11 context.Response.Write("ajax 返回:" + name);
12 }
13
14 public bool IsReusable {
15 get {
16 return false;
17 }
18 }
19
20 }
复制代码
其实我们定义的会函数会被执行三次,状态码依次返回2,3,4,现在我们来看看这个状态码是什么:
xmlHttp.readyState:
0 :未初始化,还没有调用send()方法
1 :载入,已调用send()方法,正在发送请求
2 :载入完成,send()方法执行完成,已经接收到全部响应内容
3 :交互,正在解析响应内容
4 :完成,响应内容解析完成,可以在客户端调用了
意思是我们只需要关注4便可以了。
若是页面采用utf-8编码,而服务器采用gbk的话,也许会出现编码问题,甚至引起莫名其妙的BUG:
2.0改进:
可以设置HTTP请求的时限。
可以使用FormData对象管理表单数据。
可以上传文件。
可以请求不同域名下的数据(跨域请求)。
可以获取服务器端的二进制数据。
可以获得数据传输的进度信息。