一、什么是ajax(异步 javascript和xml)
为了解决传统的等待->响应->等待的弊端的技术,又叫局部页面刷新技术。可以实现浏览器页面的部分数据更新而不刷新整个页面。
浏览器内置对象(XMLHttpRequest)向服务器发送请求,服务器返回xml数据或文本数据给浏览器,然后浏览器中使用这些数据更新局部的页面信息。
等待-响应-等待
指早起的web开发中,表单提交数据浏览器会将注册页面抛弃,等服务器返回一个完整页面。在等待过程中,用户不能做任何操作。服务器生成页面发送给浏览器,浏览器重新解析页面生成相应界面。
一、ajax原理
一、ajax编程
1)获取XMLHttpRequest对象
由于XMLHttpRequest对象并没有标准化,在不同浏览器下支持不同,IE不支持此对象
在IE中使用。但是微软支持一个对象同样可以实现这样的功能。他就是ActiveXObject.
XMLHttpRequest对象中的重要属性
A.onreadystatechange 注册监听器,绑定一个事件处理函数
B.readyState 返回该XMLHttpRequest对象与服务器通讯的状态
返回值是number类型,不同值表示含义:
0 该对象已建立,但未初始化(还没有调用open方法)
1 对象已创建并初始化(还没有调用send方法)
2 数据发送,send方法调用
3 数据传输中,已经接受部分数据
4 响应结束,数据接受完毕
C. responseText 获得服务器响应回来的文本内容
D. responseXML 获得服务器返回的XML dom 对象
E. status 获取状态码
2)使用XMLHttpRequest发送请求到服务器
A.get请求
function checkName(){ var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{ xhr=new ActiveXObject(); } xhr.open("get","checkname.do"); xhr.send(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ var txt = xhr.responseText; $('namespan').innerHTML = txt; }else{ $('namespan').innerHTML = "系统故障,请稍后重试"; } }else{ $('namespan').innerHTML = "正在验证..."; } } }
B.post请求
function checkName2(){ var xhr=null if(window.XMLHttpRequest){ xhr=new XMLHttpRequest; }else{ xhr=new ActiveXObject('Microsoft.XMLHttp'); } xhr.open("post", "checkName.do", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send("user=dhh&password=123"); xhr.onreadystatechange()==function(){ if(xhr.readyState==4){ if(xhr.status==200){ var txt = xhr.responseText; $('namespan').innerHTML = txt; }else{ $('namespan').innerHTML = "系统故障,请稍后重试"; } }else{ $('namespan').innerHTML = "正在验证..."; } } }
3)服务器端处理请求
4)监听器中,处理服务器返回的响应数据
但是我们平时更多时候是使用jQuery实现ajax请求。jQuery实现下更加简洁
function checkName2(){
$.ajax({ type:"post", url:"UpLoad", data:par, dataType:"text", success:function(data){ console.log(data); }, error:function(data){ alert("系统错误请联系管理员"); } });
}
文件上传功能的ajax也可以实现 需要用到formData对象
function AjaxForm(){ var formData = new FormData($( "#form1" )[0]); $.ajax({ type:"post", url:"AjaxForm", data:formData, dataType:"text", async: false, cache: false, contentType: false, processData: false, success:function(data){
alert(data); }, error:function(data){ alert("系统错误请联系管理员"); } }); }