Web基础之Ajax

2023-09-06 0 257

Ajax简述:

+ Ajax(Asynchronous JavaScript And Xml),触发器的JavaScript和Xml。是一类用以明显改善使用者新体验的控制技术,其本质是借助应用程序内建的两个特定第一类(XMLHttpRequest,通常称作Ajax第一类)触发器地(Ajax第一类在向服务端允诺时,应用程序并不能封存现阶段网页,使用者依然能对现阶段网页作其它的操作方式)向服务端允诺,伺服器带回部份统计数据(并非一个完备的捷伊网页,而要文档或是Xml文件格式),在应用程序端,能借助那些统计数据部份预览现阶段网页。整座操作过程,网页无创下,不吓倒使用者的操作方式。

+ 缺点:

1) 网页无创下,不吓倒使用者的操作方式。

户端(应用程序)与服务端间的传输量大大增加

3) 是一类控制技术标准的控制技术,不须要浏览任何人应用程序。

+ 赢得Ajax第一类:虽然XMLHttpRequest(Ajax第一类)没控制技术标准,因此要界定应用程序。

function getXhr(){ var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest();//非IE应用程序 }else{ xhr=new ActiveXObject(Microsoft.XMLHttp);//IE应用程序 } return xhr; }

句子处置:

$(“id”) <—> document.getElementById(“id”);

$F(“id”) <—> document.getElementById(“id”).value;

+ Ajax第一类特性:

1)onreadystatechange:存取两个阿提斯鲁夫尔谷表达式(H55N),该表达式用以处置readystatechange该事件。Ajax第一类的readyState特性出现出现改变,比如说从0到1,则会造成onreadystatechange该事件。

2)responseText:赢得伺服器返回的文档统计数据。

3)responseXML:赢得伺服器返回的Xml文件格式。

4)status:赢得状态码。

5)readyStatue:返回Ajax第一类与伺服器通讯的状态,返回值是两个number类型的值。一共有5个值,分别是:

①0:(未初始化)第一类已建立,但是尚未初始化(尚未调用open方法)。

②1:(初始化)第一类已建立,尚未调用send方法。

③2:(发送统计数据)send方法已调用。

④3:(统计数据传送中)已接收部份统计数据。

⑤4:(响应结束)Ajax第一类已经赢得了伺服器返回的所有的统计数据。

if(xhr.readyState==4 && xhr.status == 200){…}

+ get允诺:

1)赢得Ajax第一类,比如说:var xhr=getXhr();//调用之前定义的表达式

2)发送get允诺:

① xhr.open(‘get’,check_username.do?username=chang&age=23,true);

//参数依次为:允诺方式、url、同步还是触发器(true:触发器,使用者能对现阶段网页进行其它操作方式,不能封存网页;false:同步,应用程序会锁定该网页,使用者只能等待,不能封存网页)

② xhr.onreadystatechange=func1();//存取两个阿提斯鲁夫尔谷表达式(H55N)

③ xhr.send(null);//送允诺参数,因为参数已经写在了允诺资源路径中,因此这里为null。

④阿提斯鲁夫尔谷表达式func1():

function f1(){ if(xhr.readyState==4){ var txt=xhr.responseText; dom操作方式…… } }

+ post允诺:

1)赢得Ajax第一类,比如说:var xhr=getXhr();//调用之前定义的表达式

2)使用Ajax第一类发送post允诺:

① xhr.open(“post”,”check.do”,true);//建立连接

② xhr.setRequestHeader(“content-type”,”application//x-www-form-urlencoded”);//发送两个content-type消息头, 必须设置

③ xhr.onreadystatechange=func1();//存取两个阿提斯鲁夫尔谷表达式(H55N)

④ xhr.send(“username=小红“);//发送允诺参数

【注意:与get允诺不同,允诺参数要放到send方法里面;因为按照HTTP协议的要求,发送post允诺时,应该发送两个content-type消息头,而Ajax第一类在默认情况下,不能发送这个消息头,因此,需要调用setRequestHeader方法来添加。】

3)编写表达式TNUMBERAPfunc1();

+ 乱码问题:

1)get允诺:

—>乱码造成原因:IE应用程序内建的Ajax第一类会使用“GBK”或“GB2312”对中文参数进行编码,而其它应用程序(Chrom、Firefox)内建的Ajax第一类会使用“utf-8”对中文参数进行编码。服务端,默认会使用“ISO-8859-1”去解码。因为编码与解码所使用的字符集(编码格式)不一致,因此,会出现乱码问题。

—> 乱码解决:

① 设置伺服器使用指定的字符集去解码。比如说,能修改Tomcat的server.xml配置(conf文件夹中),添加URIEncoding=“utf-8″(告诉伺服器,对于所有的get允诺,默认使用“utf-8”去解码),修改之后重新启动伺服器。

② 使用encodeURI()表达式(JS中内建表达式)对允诺地址进行编码。encodeURI()表达式会使用“utf-8”进行编码。

xhr.open(get,check_username.do?username=+$F(username),true); var uir=check_username.do?username=+$F(username); xhr.open(get,encodeURI(uri),true);

2)post允诺:

—> 乱码造成原因:所有应用程序(通常指三大应用程序:Chrom、Firefox、IE)内建的Ajax第一类都会使用“utf-8”对中文参数进行编码,而伺服器默认情况下,会使用“ISO-8859-1”去解码。

【注意:Firefox特定,本应是乱码,但能正常显示。通过截取消息头发现Firefox会在消息头中自动添加”charset=utf-8″。】

—> 乱码解决:服务端添加:request.setCharacterEncoding(“utf-8”);

+ 缓存问题

1)get允诺:

—> 缓存原因:IE应用程序(其它应用程序没这个问题)内建的Ajax第一类会检查允诺地址是否访问过,如果访问过,则不再向服务端允诺。

—> 解决方式:

① 在请求地址后面添加两个随机数,用于欺骗IE;如:xhr.open(get,getNumber.do?+Math.random(),true);

② 使用post方式发允诺。

【注意:】

1)href=”javascript:;”相当于href=”#”,写成href=”javascript:;”通常要和onclick该事件一起使用,表示a元素不再指向两个地址,而要点击后触发两个该事件。

+ 同步允诺:

1)什么是同步允诺

Ajax第一类在向服务端允诺时,应用程序会锁定现阶段网页,使用者不能够对现阶段网页做任何人的操作方式。

2)如何发送同步允诺

open(允诺方式,允诺地址,false)

3)优先使用触发器,因为同步会影响性能,当服务器端处置比较慢的时候,应用程序会锁定现阶段网页(“假死”)。

4)只有当客户端须要等待伺服器的响应之后,才能继续向下执行时,应该使用同步。

【注意:Firefox的某些版本(低版本,如3、4)对于同步的支持比较特定:

不能使用xhr.onreadystatechange来存取两个阿提斯鲁夫尔谷表达式,而应该在send方法执行之后,才调用xhr.responseText方法来赢得伺服器返回的统计数据。】

+ 跨域

当协议、子域名、主域名、端口号中任意两个不相同时的接口访问即是跨域。

javaScript出于安全考虑,不允许跨域调用其它网页的第一类。如http://a.com下的js不能调用http://b.com下的js第一类。

* 处置方法

1)代理方式JSONP:须要与服务端配合。

—> 在服务端的接口中添加jsonp;

—> 在web端的ajax的参数:dataType:”jsonp”,jsonp:”callback自定义返回名”;

2)在HTML5中已经提供了跨域支持。只须要在伺服器添加header:”Access-Control-Allow”和“Access-Control-Allow-Methods:POST,GET”

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务