ajax的过程
2016-08-03 22:30
295 查看
AJAX=Asynchronous JavaScript and XML(异步的JavaScript和XML)
AJAX不是一种新的语言,而是一种使用现有标准的新方法。
AJAX在不重新加载整个页面的情况下,实现与服务器的数据交换刷新局部页面。
详细过程:
创建XMLHttpRequest对象,也就是创建一个异步调用对象
创建一个新的HTTP请求,并指定请求方式、URL、是否异步调用
设置响应HTTP请求状态变化函数
发送HTTP请求
获取异步调用返回的函数
使用javascript和DOM实现局部刷新
1.创建XMLHttpRequest对象
2.向服务器发送请求
无法使用缓存文件(更新服务器上的文件或数据)
向服务器发送大量数据 (
发送包含未知字符的用户输入时,
3.服务器响应
4.readyState
XMLHttpRequest对象的三个重要属性:
onreadystatechange 存储函数,当readyState属性改变时就会调用该函数
readyState 存有XMLHttpRequest对象的状态
0 请求未初始化 对象已创建
1 服务器连接已建立 open调用
2 请求已接收 send调用
3 请求处理中 正在接收数据
4 请求已完成,响应已就绪 完成
status
200 ‘ok’
404 未找到页面
AJAX不是一种新的语言,而是一种使用现有标准的新方法。
AJAX在不重新加载整个页面的情况下,实现与服务器的数据交换刷新局部页面。
详细过程:
创建XMLHttpRequest对象,也就是创建一个异步调用对象
创建一个新的HTTP请求,并指定请求方式、URL、是否异步调用
设置响应HTTP请求状态变化函数
发送HTTP请求
获取异步调用返回的函数
使用javascript和DOM实现局部刷新
1.创建XMLHttpRequest对象
//创建XMLHttpRequest对象 var xhr; if(window.XMLHttpRequest){ //for ie7+,firefox,Chrome,Opera,Safari xhr=new XMLHttpRequest(); }else{ //for ie6,ie5 xhr=new ActiveXObject("Microsoft.XMLHTTP"); }
2.向服务器发送请求
//向服务器发送请求 //open()规定发送请求的类型,url,是否异步处理 xhr.open("GET","test.txt",true); xhr.send();
GET和
POST,与
POST相比,
GET传输速度快,效率高,大部分情况下使用
GET,在以下几种情况中使用
POST:
无法使用缓存文件(更新服务器上的文件或数据)
向服务器发送大量数据 (
POST没有数据量限制)
发送包含未知字符的用户输入时,
POST比
GET更稳定,可靠。
3.服务器响应
//如果来自服务器的响应不是XML文件,使用responseText属性 myDiv.innerHTML=xhr.responseText; //如果来自服务器的响应是XML文件 xmlDoc=xhr.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); var myDiv= document.getElementById("myDiv"); for (i=0;i<x.length;i++){ txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } myDiv.innerHTML=txt;
4.readyState
//当readyState改变时,就会触发onreadystatechange事件 //readyState属性存有XMLHttpRequest对象的状态信息 //onreadystatechange事件会触发5次,对应readyStates的5个状态(0~4) xhr.onreadystatechange==function(){ if(xhr.readyState == 4 && xhr.status ==200){ myDiv.innerHTML=xhr.resopnseText; } } //或者使用Callback函数 function myFun(){ loadXMLDoc("test.txt",function(){ if(xhr.readyState==4 && xhr.status ==200){ myDiv.innerHTML=xhr.resopnseText; } }); }
XMLHttpRequest对象的三个重要属性:
onreadystatechange 存储函数,当readyState属性改变时就会调用该函数
readyState 存有XMLHttpRequest对象的状态
0 请求未初始化 对象已创建
1 服务器连接已建立 open调用
2 请求已接收 send调用
3 请求处理中 正在接收数据
4 请求已完成,响应已就绪 完成
status
200 ‘ok’
404 未找到页面
相关文章推荐
- Ajax过程
- AJAX实现过程
- 使用原生JS的AJAX读取json全过程
- Gridview各种功能+AspNetPager+Ajax实现无刷新存储过程分页
- ext框架插件协助JSEclipse开发ajax的配置过程
- 创建Ajax过程
- 在使用ajax过程中,引起Sys未定义的脚本错误的一个原因
- ajax是浏览器与服务器的交换数据过程
- 一个原生态ajax过程,提交表单的例子
- java开发过程中 循环ajax 变量问题
- ajax实现过程
- Ajax 原理过程 同步与异步区别 优缺点
- 学习AJAX过程中遇到的一些问题
- Ajax融合struts2过程中,action类回传给客户端中文数据出现问号乱码的解决办法
- 使用ajax的过程
- 求知过程之Ajax表单提交
- Ajax+Jquery+Json,ASP.NET分页,存储过程分页
- JSP中获取ExtJS.Ajax前台传递的JSON数据实现过程
- AJAX回传过程中禁止用户重复提交
- ASP.NET AJAX Toolkit的安装过程