ajax实现过程
来源:互联网 发布:软件试用报告范文 编辑:程序博客网 时间:2024/06/05 14:40
特征
Ajax能够以异步方式从服务器取得更多信息,意味着用户单击后,可以不必刷新页面也能取得新数据,也就是说,可以使用XHR对象取得新数据,然后通过DOM将新数据插入到页面中。而且Ajax与XML无关,这种技术就是无需刷新页面就能从服务器取得数据。
实现过程;
创建XMLHttpRequest对象(需要考虑各浏览器兼容的问题)
function createXHR(){
if (typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined"){
if (typeof arguments.callee.activeXString != "string"){
var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
i, len;
for (i=0,len=versions.length; i < len; i++){
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (ex){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("No XHR object available.");
}
}
var xhr = createXHR();
2、使用XMLHttpRequest对象打开一个连接(指定连接方式<post/get>和连接地址以及是否同步)
xhr.open("POST","URL ",false);
调用XMLHttpRequest对象的open方法。第一个参数是提交数据的方式,取值为post/get;第二个参数是提交的目标页面(也就是用于处 理提交数据的页面);第三个参数指定是否请求是异步的-缺省值为true,为了发送一个同步请求,需要把这个参数设置为false。
3、设置请求的头部(请求的类型和请求的编码格式)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
4、设置回调函数
主要用于处理从服务端发送给客户端的数据,主要使用javascript去调用页面中的元素,并根据服务端返回的结果去控制页面中元素的更新。内部实现实际上是javascript中的事件处理机制。
具体实现:
//事件绑定
xhr.onreadystatechange=show;
//事件处理函数
function show()
{
//如果readyState为4,表示响应已经被完全接收。
if(xhr.readyState==4)
{
//如果获得的结果状态代码为200,表示服务端正常返回
if((xhr.status>=200 && xhr.status <300) || xhr.status == 304 )
{
//客户端响应代码
}else {
alert ("Request was unsuccessful:" + xhr.status);
}
}
}
5、发送请求
调用XMLHttpRequest对象的send方法实现数据的发送。
具体实现:
if(uname.value!=null)
xmlHttp.send("uname="+uname.value);
6、更新页面显示
在发送数据到服务端之后,服务端处理完毕会返回客户端一个响应,我们在客户端所设定的回调函数实际上就是对事件的处理,当readystate属性发生变化的时候都会触发事件处理函数,如果readystate变成了4并且响应的状态码是200的话,那么则表示服务端正常返回了信息。这个时候我们就能够获 得服务端的响应信息并进行相对应的处理。
具体实现:
alert(xmlHttp.responseXML);
alert(xmlHttp.responseHTML);
返回的状态码能看出什么?
支持哪些数据格式?应该是所有数据格式
ajax解决多任务同时调度解决方案
同步与异步:
ajax.open方法中,第3个参数是设同步或者异步。prototype等js类库一般都默认为异步,即设为true。先说下同步的情况下,js会等待请求返回,获取status。不需要onreadystatechange事件处理函数。而异步则需要onreadystatechange事件处理,且值为4再正确处理下面的内容。
- ajax实现过程
- ajax的实现过程
- AJAX实现过程
- 谈谈Ajax原理实现过程
- 谈谈Ajax原理实现过程
- 采用AJAX实现网站异步交互过程
- Ajax基本概念以及JS实现Ajax的过程
- ajax过程
- ajax过程
- Ajax过程
- ajax过程
- [Ajax]小山版Ajax实现无刷新树----- 实现过程解释
- 在线课堂:采用AJAX实现网站异步交互过程
- Ajax+存储过程实现无刷新登录验证功能
- $.ajax实现局部刷新过程--验证用户…
- ajax实现局部刷新过程-Servlet.ser…
- 辛星浅析一次ajax的实现过程
- AJAX实现无刷新分页(三层\存储过程\WebService\AJAX\Jquery)
- 一个值5000元,且一分钟就学会的“of undefined” bug的解决办法
- D3P0实践小例子
- 23种设计模式—单例模式
- 【题解】Leetcode.319.Bulb Switcher
- DeepID2 face recognition
- ajax实现过程
- JS变量以及其作用域详解
- 地图轨迹平滑算法
- Spring AOP声明式事务异常回滚
- poj 2349
- 跨域
- ORACLE的数据库审计 audit
- [LeetCode]--363. Max Sum of Rectangle No Larger Than K
- javaee之连接池解析