快捷搜索:

解析javascript Ajax的奥秘

媒介

ajax已经盛行很多年了,现在来说它是否已经晚了呢???分外是有这样框架那样框架后,还有几小我熟识原生ajax呢?我们天天都邑用到的器械你到底对他懂得吗?

在近来一次口试上不幸被问到了,原以为很认识的器械你会发明你对他根本不认识!要说认识AJAX的话你必要绝不踌躇回答以下问题:

不合浏览器下ajax实现上的差异

一次ajax哀求历程中有哪几种状态值,不合状态值之间含义是什么ajax在跨域的环境下会呈现什么状况,以及办理规划

ajax和后台数据交互时会有什么编码问题吗?着末可以说说XMLHttpRequest2有什么新器械

怎么样?各位能随意马虎的答上以上4点,便可直接轻忽此文,若是只能很暧昧的说出1、2点的话,便硬着头皮看我这篇水文吧,呵呵。

因为本文是边写边实验的,以是可能会有点乱,也可能会有我的唧唧歪歪的思虑历程,请各位见谅。

别的,本人水平还很浅,写的器械必定有问题,若是文中有任何差错以及不够,请请必然指出来,多谢!

ajax简介

水文照样要有水文的样子,我这里照样必要简单先容一番:

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工具,必要留意兼容,我们先来个管中窥豹:

初始化

script type="text/javascript">var xmlHttp = false;

if (window.XMLHttpRequest) {try {

xmlHttp = new XMLHttpRequest();} catch (e) {

xmlHttp = false;}

} else {try {

xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');} catch (e) {

try {xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');

} catch (ee) {xmlHttp = false;

}}

}

var s = '';script>

ajax的哀求相应模型

ajax基础流程基础如下:

从web表单中获取所需数据(不用表单也行)

建立连接url打创办事器连接

设置数据返回回调函数发送哀求

xmlHttp.open('GET', url, true);xmlHttp.onreadystatechange = function (e) {};

xmlHttp.send(null)

open时,着末一个参数为true将建创新步连接,false将等待办事器相应

onreadystatechage 可以指定命据返回时回调函数

send就是发送哀求,参数就是要传的参数,没有参数可以填null

我们来写段后台法度榜样试试:

前端

>

html xmlns="http://www.w3.org/1999/xhtml">head>

title>title>head>

body>

body>script type="text/javascript">

var xmlHttp = false;function createXMLHttpRequest() {

if (window.XMLHttpRequest) {try {

xmlHttp = new XMLHttpRequest();} catch (e) {

xmlHttp = false;}

} else {try {

xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');} catch (e) {

try {xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');

} catch (ee) {xmlHttp = false;

}}

}}

createXMLHttpRequest();

if (xmlHttp) {xmlHttp.open('GET', 'ajax.ashx', true);

xmlHttp.onreadystatechange = function (e) {var tmp = xmlHttp.responseText;

var s = '';}

xmlHttp.send();

}

var s = '';

script>html>

办事器端代码

%@ WebHandler Language="C#" Class="ajax" %>

using System;using System.Web;

public class ajax : IHttpHandler {

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";string name = context.Request.QueryString["name"] == null ? "" : context.Request.QueryString["name"].ToString();

context.Response.Write("ajax 返回:" + name);}

public bool IsReusable {

get {return false;

}}

}

着实我们定义的会函数会被履行三次,状态码依次返回2,3,4,现在我们来看看这个状态码是什么:

xmlHttp.readyState:

0 :未初始化,还没有调用send()措施1 :载入,已调用send()措施,正在发送哀求

2 :载入完成,send()措施履行完成,已经接管到整个相应内容3 :交互,正在解析相应内容

4 :完成,相应内容解析完成,可以在客户端调用了

意思是我们只必要关注4便可以了。

别的几回哀求返回数据同等可能是由于浏览器缓存缘故原由,请各位自己加上随机数哟。

跨域处置惩罚

ajax也会碰到跨域问题的,我们所说的跨域现在一样平常都是跨域哀求数据,跨域提交数据这种工作似乎只有html5的postMessage能做。

跨域哀求数据的道理是,我们先在我们的页面上定义一个js函数,然后以script的要领哀求数据,数据返回的字符串便会调用我们定义的措施:

xmlHttp.open('POST', 'http://localhost:47389/html5%E5%92%8Ccss3/ajax.ashx', true);

将前面代码url处做一个改动后,哀求就没有相应了,我们先看看这个url会输出什么:

跨域

%@ WebHandler Language="C#" Class="ajax" %>

using System;using System.Web;

public class ajax : IHttpHandler {

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";context.Response.Write("Hello World");

}

public bool IsReusable {get {

return false;}

}

}

我们改动下后台代码:

改动后

"C#" Class="ajax" %>

using System;using System.Web;

public class ajax : IHttpHandler {

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/html";string callback = context.Request.QueryString["callback"] == null ? "callback" : context.Request.QueryString["callback"].ToString();

context.Response.Write(callback + "();");}

public bool IsReusable {

get {return false;

}}

}

如斯便会返回callback字符,

着实,说到异步跨域问题,我感到就和ajax关系不大年夜了,我想的是这样做:

跨域后台

"C#" Class="ajax" %>

using System;using System.Web;

public class ajax : IHttpHandler {

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/html";string callback = context.Request.QueryString["callback"] == null ? "callback" : context.Request.QueryString["callback"].ToString();

context.Response.Write(callback + "({name: '叶小钗'});");}

public bool IsReusable {

get {return false;

}}

}

跨域前台

>

html xmlns="http://www.w3.org/1999/xhtml">head>

title>title>head>

body>

body>script type="text/javascript">

function callback() {

alert('函数回调');}

var url = 'http://localhost:47389/html5%E5%92%8Ccss3/ajax.ashx';var scpt = document.createElement('script');

scpt.setAttribute('type', 'text/javascript');scpt.setAttribute('src', url);

document.getElementsByTagName("head")[0].appendChild(scpt);

script>html>

如斯一来,便跨域了!

针对跨域post的处置惩罚,一样平常因此form target指向一个暗藏的iframe实现的,比如我们最初的文件图片上传“ajax”的实现。

编码问题

若是页面采纳utf-8编码,而办事器采纳gbk的话,大概会呈现编码问题,以致引起莫名其妙的BUG:

这里便让中文不能解析。

HTML5中的XMLHttpRequest

老版本毛病:

只支持文本数据的传送,无法用来读取和上传二进制文件。传送和接管数据时,没有进度信息,只能提示有没有完成。

受到"同域限定"(Same Origin Policy),只能向同一域名的办事器哀求数据。

.0改进:

可以设置HTTP哀求的时限。可以应用FormData工具治理表单数据。

可以上传文件。可以哀求不合域名下的数据(跨域哀求)。

可以获取办事器真个二进制数据。可以得到数据传输的进度信息。

作为XMLHttpRequest的改进版,IE9都还不支持呢,预计最新的IE10应该没问题了。

XMLHttpRequest Level2 在功能上有了很大年夜的改进,比如2.0版本可以跨域啦!!!

跨域http哀求包孕一个origin头部,他为办事器供给http哀求源信息,头部由浏览器保护,不能被法度榜样变动,从本色上讲他与跨文档消息通信中消息事故的origin属性感化相同。

origin头部不合于起初的refer,后者referer是一个包孕路径的完备url,路由可能包孕敏感信息,浏览器不必然发送referer,但必然会发送origin。

算了,以上这块是抄的,我完全没有观点,反正意思是按照他的规则玩游戏,你就可以跨域!

我这里想要表达的重点着实因此下功能点:

XMLHttpRequest2.0支持了对进度的相应!确凿是进度的相应,他让我们上传文件孕育发生进度条变成了可能,之前仅有readystatechage一个事故能给用来相应进度,而且该事故并不兼容,如ie中就不会有状态3,更别说上传通信了,这种环境下要实现进度条是一件无比麻烦的工作:

我们来看看现在的事故列表

loadStart

传输开始时触发progress

上传历程中触发,他的e属性会包孕很多有用信息哦。abort

取消上传时触发error

掉足时触发load

吸收完数据触发loadend

传输停止触发,无论成功与否

您可能还会对下面的文章感兴趣: