1.使用：
ie是第一款引入XHR对象的浏览器,ie7+只要一句，var xhr=new XMLHttpRequest();就可以了。
1、创建异步对象
// 进行createXMLHttpRequest对象的创建，由于不同的XMLHttpRequest的支持不同所以根据不同的浏览器创建
function createXMLHttpRequest(){
//对遵守DOM2规范的浏览器
if(window.XMLHttpRequest){
objXMLHttp = new XMLHttpRequest();
}
else{
//ie 太多了循环下
var IEXML = ['MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var i=0; i < IEXML.length ; i++){
try{
//微软发布的Active控件
objXMLHttp = new ActiveXObject(MSXML[i]);break;
}catch(e){
alert("创建xmlhttprequesst对象失败!");
}
}
}
}
var xhr=createXMLHttpRequest();//字面量模式会立即执行
2提交
get提交：
xhr.open("GET", "Ajax.ashx?id=" + id, true);
objXMLHttp.send(null);
post提交：
为了使得服务器像表单那样去处理，采用模拟Content-Type头的方式：
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
发送
xhr.send(ser);
可以将ser序列化之后在发送给服务器,序列化的方法：
JSON.stringify(js对象);//将js对象转化为json字符串
JSON.parse();//与上面相反
处理
定义回调函数与异步监听
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) { ///判断服务器返回的状态码是否为200，如果不是，则可能服务器出现了不测
var res = xhr.responseText;//接收返回的效果
}
}
}
load事件：IE8+和其他都支持，接收到完整数据时触发
process事件：用于监听接收数据的进度
完整的
var objXMLHttp; //进行createXMLHttpRequest对象的创建，由于不同的XMLHttpRequest的支持不同所以根据不同的浏览器创建 function createXMLHttpRequest(){ //对遵守DOM2规范的浏览器 if(window.XMLHttpRequest){ objXMLHttp = new XMLHttpRequest(); } else{ //ie 太多了循环下 var IEXML = ['MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP']; for(var i=0; i < IEXML.length ; i++){ try{ //微软发布的Active控件 objXMLHttp = new ActiveXObject(MSXML[i]);break; }catch(e){ alert("创建xmlhttprequesst对象失败!"); } } } } //通过POST方式提交 function postSend(){ //获取contentvalue var contentvalue = document.getElementById("content").value; alert(contentvalue); //初始化xmlhttprequest对象 createXMLHttpRequest(); //创建url var url = "ajaxServlet"; //打开与服务器的连接 用post objXMLHttp.open("POST", url, true); //post需要设置消息头 objXMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //回调函数 objXMLHttp.onreadystatechange = processResponse; //发送设置的参数，形式： param = value objXMLHttp.send("value="+contentvalue); } //通过get方式请求 function getSend(){ //获取value var contentvalue = document.getElementById("content").value; alert("get:"+contentvalue); //初始化xmlhttprequest对象 createXMLHttpRequest(); //创建url,get方式采用url拼接传参数 var url = "ajaxServlet?value="+contentvalue; //打开与服务器的连接 用post objXMLHttp.open("GET", url, true); //回调函数 objXMLHttp.onreadystatechange = processResponse; //发送设置的参数，参数已经上面传 objXMLHttp.send(null); } function processResponse(){ if(objXMLHttp.readySatae== 1){ alert("XMLHttpRequest对象开始发送"); }else if(objXMLHttp.readySatae== 2){ alert("XMLHttpRequest对象发送完成"); }else if(objXMLHttp.readySatae== 3){ alert("XMLHttpRequest对象读取服务器响应开始"); }else if(objXMLHttp.readySatae== 4){ alert("XMLHttpRequest对象读取服务器响应结束"); if(onjXMLHttp.status == 200){ //信息已经成功返回，处理开始 var headers = objXMLHttp.getAllResponseHeaders(); aler(headers); //得到服务器返回的信息 var infor = objXMLHttp.responseText; alert(infor); }else{ alert("请求的服务器问题"); } } }
jquery中ajax
jquery提供了$.ajax,$.get(),$.post()等方法
$.ajax({
url: "/CommonService.asmx/SayHello",
type: "Post",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: "{name:'Varchar32'}",
success: function (data) {
alert(data.d);
},
error: function (data) {
//200的响应也有可能被认定为error，responseText中没有Message部分
alert($.parseJSON(data.responseText).Message);
},
complete: function (data) {
;//after success or error
}
});
到这里还要特别介绍一个插件:jQuery.form插件，官网：http://malsup.com/jquery/form/它在jquery调用webservice中很好使用
使用：http://www.cnblogs.com/heyuquan/p/form-plug-async-submit.html和http://www.cnblogs.com/fish-li/archive/2013/01/13/2858599.html#_label3
它的ajaxForm直接提交整个表单，而且还能根据name标示来选择不同的方法提交，提交各种复杂表单。
名词解释
CSRF（Cross-Site Request Forgery,跨站点请求伪造）
CORS(Cross-Origin Resource Sharing ,跨域资源共享)
SSE(Server-Sent Events,服务器发送事件)
跨域
原因：同源策略（XHR对象只能访问包含它的页面位于同一个域中的资源，协议域名端口相同）
方法：
1.服务器段设置
Access-Control-Allow-Origin:* 代表所有域名都可以访问到
Access-Control-Allow-Origin: http://www.cnblogs.com 限定了域名
2.图像ping
使用<img>标签，这种技术在大访问量的页面上可以将图片设为其他服务器上，降低服务器压力
3.JSONP
利用<script>可以作为一种很好的跨域方案。
var script=document.createElement("script");
script.src="http://dfsa.net/json/?callback=responsejs";
document.body.insertBefore(script,document.body.firstChild);
必须指定回调函数这里指定responsejs
服务器端则必须返回一段js脚本，如json对象数组定义的脚本
modlist = [
{“modname” : “mod1”, “usernum” : 200, “url” : ” /widget/info/1”},
{“modname” : ”mod2”, “usernum” : 300, ”url” : ” /widget/info/2”},
…
];
然后判断这个脚本加载完毕(可以利用这个调用百度搜索：Script.src = 'http://suggestion.baidu.com/su?wd='+oTxt.value+'&p=3&cb=baidu&from=superpage')
js.onload = js.onreadystatechange = function() {
if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
// callback在此处执行
js.onload = js.onreadystatechange = null;
}
};
4.iframe+document.domain方式
对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain = ‘a.com’；然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况，如果你异想天开的把script.a.com的domian设为alibaba.com那显然是会报错地！代码如下：
www.a.com上的a.html
document.domain = 'a.com'; var ifr = document.createElement('iframe'); ifr.src = 'http://script.a.com/b.html'; ifr.style.display = 'none'; document.body.appendChild(ifr); ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.document; // 在这里操纵b.html alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue); };
script.a.com上的b.html
document.domain = 'a.com';
5.jquery中封装的$.get()，和$.ajax()的get模式可以跨域，还有$.getJSON()方法
$.getJSON("http://localhost:12500/CommonService.asmx/GetGenderByName?name=Varchar32&callback=?",
function (data) {
alert("in success" + "：" + data.name + "， 性别" + data.gender);
}
);
服务器推送：Comet
1长轮询：页面js轮询服务器，实例：
window.setInterval(function () { $.get("${pageContext.request.contextPath}/communication/user/ajax.mvc", {"timed": new Date().getTime()}, function (data) { $("#logs").append("[data: " + data + " ]<br/>"); }); }, 3000);
2。SSE是围绕只读Comet推出的API，只在简化HTTP流和长轮询代表的Comet的技术的使用
3. Web Sockets 使用了全新的Web Socket协议。一些聊天室使用这个。