ajax技术是什么?ajax技术详解

TheDisguiser 2020-04-01 16:07:51 java常见问答 9145

对于前端开发的程序员小伙伴们来说,一定不陌生ajax这个小东西。只要是有前端网站的地方大部分有它,今天我们就来说说这个ajax到底是个什么玩意。

首先我们先来认识下Ajax :

Ajax是Asynchronous JavaScript and XML的缩写,即“异步的JavaScript和XML技术”。

AJAX是一种用于创建快速动态网页的技术。

ajax通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。

所以在不重新加载整个网页的情况下,ajax也可以对网页的某部分进行局部更新。

Ajax原理图 :

ajax技术

XMLHttpRequest对象 :

这个家伙很重要,是AJAX的基础,目前市面上所有浏览器均支持XMLHttpRequest对象。 XMLHttpRequest用于在后台与服务器交换数据。这可以使它在不加载整个网页的情况下实现局部更新。

现在创建Ajax :

var xmlhttp;
if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequest(); //IE7+ 
Firefox Chrome Opera Safari}else{xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); 
//IE5 , IE6}

XMLHttpRequest对象 :

send方法:

send(String)

将求情发送到服务器.

String:仅用于POST请求

GET请求与POST请求 :

GET请求:

如果我们希望通过GET方法发送信息,请向URL添加信息:

xmlhttp.open(“GET”,”demo.Java?name=jaovo&age=20”,true); 
xmlhttp.send();

POST请求:

如果需要像HTML表单那样POST数据,请使用setRequestHeader()来添加HTTP头。然后在send()方法中规定您希望发送的数据:

xmlhttp.open(“POST”,”demo.Java”,true);
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
//向请求添加HTTP头 
xmlhttp.send(“name=jaovo&age=20”);

异步与同步 :

同步-True或False AJAX指的是异步JavaScript和XML(Asynchronous JavaScript and XML) XMLHttpRequest对象如果要用于AJAX的话,其open()方法的async参数必须设置为true: xmlhttp.open(“GET”,”demo.Java”,true);

使用AJAX,JavaScript无需等待服务器的响应,而是:

.在等待服务器响应时执行其他脚本

当响应就绪后对响应进行处理

Async=true当使用async=true时,请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4 
&& xmlhttp.status==200){                 
 document.getElementById(“mydiv”).innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.open(“GET”,”test1.txt”,true);
xmlhttp.send();
当使用async=false时,请不要编写onreadystatechange函数-把代码放到send()语句后面即可
:xmlhttp.open(“GET”,”test1.txt”,false);xmlhttp.send();
document.getElementById(“mydiv”).innerHTML=xmlhttp.responseText;

MLHttpRequest对象的三个重要的属性:

1.onreadystatechange 存储函数(或函数名),每当readyState属性改变时,就会调用该函数。

2.readyState 存有XMLHttpRequest的状态。从0到4发生变化。

0:请求未初始化

1:服务器连接已建立

2:请求已接收

3:请求处理中

4:请求已完成,且响应已就绪

3.status

200:代表OK

404:页面不存在

Callback

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

例:

unction myFunction() {
loadXMLDoc("/ajax/test1.txt",function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200) {                  
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}
 });
}

AJAX+Java请求流程 :

1.AJAX使用open函数以GET或者POST方式,使用send函数来向Java发送请求;

2.请求结果readyState的改变,触发事件onreadystatechange;

3.判断readyState==4并且status==200,代表请求成功,并有响应;

4.响应的值是Java脚本输出的内容,这个内容在JS端使用responseText来接收,并进行相关处理。

ajax技术

Ajax的优点:

ajax最大的优点就是页面无刷新。

ajax可以使用异步方式与服务器通信,不用打断用户操作,具有更加迅速的响应能力。

ajax的原则是“按需取数据”,最大程度的减少冗余请求,减少服务器的负荷。

Ajax的缺点:

破坏浏览器后退按钮的正常行为。在动态更新页面后,用户无法回到前一个页面的状态.

使用 JavaScript作 Ajax的引擎,由于JavaScript的兼容性和 Debug兼容性很差,所以很麻烦。

以上就是关于ajax的一点内容,你明白了吗?更多相关内容请持续关注本站。