网站3网合一是怎么做的,混沌鸿蒙网站建设,上海室内设计公司排行榜,企业网站seo外包 sXHR:
// XHR(XMLHttpRequest):为向服务器发送请求和解析服务器响应提供了流畅的接口
// 能够以异步方式从服务器取得更多信息,意味着用户点击后,可以不必刷新页面也能取得新数据
// 换句话说,可以使用XHR对象获取新数据,然后再通过DOM将新数据插入到页面中.XMLHttpRequest对象…XHR:
// XHR(XMLHttpRequest):为向服务器发送请求和解析服务器响应提供了流畅的接口
// 能够以异步方式从服务器取得更多信息,意味着用户点击后,可以不必刷新页面也能取得新数据
// 换句话说,可以使用XHR对象获取新数据,然后再通过DOM将新数据插入到页面中.XMLHttpRequest对象:
// IE5是第一款引入XHR对象的浏览器.再IE5中,XHR对象是通过MSXML库中的一个ActiveX对象实现的.
// 因此,在IE中可能会遇到三种不同版本的XHR对象:
// IE7之前的生成xhr对象
function createXHR() {if(typeof arguments.callee.activeXString ! string) {var version [XSXML2.XMLHttp.6.0, MSXML2.XMLHttp.3.0,XSXML2.XMLHttp],i, len;for (i0, len versions.length; i len; i) {try {new activeXObject(versions[i]);arguments.callee.activeXString versions[i];} catch (ex) {// jump this}}return new ActiveXObject( arguments.callee.activeXString);}
}// 支持IE7及更高的版本,生成xhr对象
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;} catct(ex) {// 跳过}}return new ActiveXObject(arguments.callee.activeXString);} else {throw new Error(No XHR object avilable.);}
}XHR.open()创建一个待发送的请求:
// open():它接受3个参数:要发送的请求的类型(get,post等)、请求的URL和是否异步发送请求的布尔值
// 利用上面定义的方法
var xhr createXHR();
xhr.open(get, example.php, false);// 以上代码会启动一个针对example.php的GET请求.
// 注1:以上的URL是相对于执行代码的当前页面
// 注2:open方法并不会真正发送请求,而只是启动一个请求以备发送
// 注3:只能像同一个域中使用相同端口和协议的URL发送请求.XHR.send()发送待发送请求:
// send():接收一个参数,即要作为请求主体发送的数据.如果不需要通过请求主体发送数据,则必须传入null.
// 利用上面创建的待发送请求
xhr.send(null);服务器响应的几个XHR属性:
// responseText: 作为响应主体被返回的文本
// responseXML: 如果响应的内容类型是text/xml 或”application/xml,这个属性中将保存包含着响应数据的XML DOM文档
// status: 响应的HTTP状态
// statusText: HTTP状态的说明// 可以像下面这样检测返回的status
xhr.open(get, url, false); // 同步方式
xhr.send(null);if((xhr.status 200 xhr.status 300) || xhr.status 304) {alert(xhr.responseText); // 响应主体
} else {alert(Request was unsuccessful: xhr.status);
}
// 注1:状态码304,代表请求资源未修改XHR异步发送请求的readyState属性:
// 该属性表示请求 / 响应过程的当前活动阶段
// xhr.readyState 0未初始化,尚未调用open方法
// xhr.readyState 1: 启动,调用了open方法,但未调用send方法
// xhr.readyState 2: 发送,已经调用了send方法,但并未收到响应
// xhr.readyState 3: 接收,已经接收到部分响应数据
// xhr.readyState 4: 完成,已经接收到全部响应数据,而且已经可以在客户端使用了// 看下面一个例子:
var xhr createXHR();
xhr.onreadystatechange function () {if ( xhr.readyState 4) {if ((xhr.status 200 xhr.status 300) || xhr.status 304) {alert(xhr.responseText);} else {alert(Request was unsuccessful: xhr.stauts);}}
};
xhr.open(get, url, true); // 异步发送请求
xhr.send(null);// 注1:每次readyState改变时,都会触发一次onreadystatuschange事件
// 注2:以上onreadystatuschange事件是通过DOM0级方法添加的(原因,DOM2级添加方法仅支持部分浏览器)// xhr.abort():用于在接收到响应前,取消异步请求
xhr.abort();HTTP头部信息:
// Accept: 浏览器能够处理的内容类型
// Accept-Charset: 浏览器能够显示的字符集
// Accept-Encoding: 浏览器能够处理的压缩编码
// Accept-Language: 浏览器当前设置的语言
// Connection: 浏览器域服务器之间连接的类型
// Cookie: 当前页面设置的任何Cookie
// Host: 发出请求的页面所在的域
// Referer: 发出请求的页面的URI
// User-Agent: 浏览器的用户代理// 使用xhr.setRequestHeader发送请求头部信息.必须位于xhr.open和xhr.send之间
var xhr createXHR();
xhr.onreadystatechange function () {if ( xhr.readyState 4 ){if(( xhr.status 200 xhr.status 300) || xhr.status 304) {alert( xhr.responseText);} else {alert(Request was unsuccessful: xhr.status);}}
}
xhr.open(get, url, true);
xhr.setRequestHeader(MyHeader, MyValue);
xhr.send(null);// xhr.getResponseHeader():可以取得响应的响应头部信息
// xhr.getAllResponseHeaders():可以取得一个包含所有头部信息的长字符串
var myHeader xhr.getResponseHeader(MyHeader);
var allHeaders xhr.getAllResponseHeaders();GET请求:
// 用于向服务器查询某些信息,可以将查询字符串参数追加到URL的末尾
// 查询字符串中的每个参数的名称和值都必须使用encodeURIComponent()进行编码,然后才能放到URL的末尾// addURLParam
function addURLParam(url, name, value) {url (url.indexOf(?) -1 ? ? : );url encodeURIComponent(name) encodeURIComponent(value);return url;
}// use
var url example.php;
url addURLParam(url, name, Nicholas); // example.php?nameNicholas
url addURLParam(url, book, Professional JavaScript); // example.php?nameNicholasbookProfessional%JavaScriptxhr.open(get, url, false);POST请求:
// 通常用于向服务器发送应该被保存的数据// 使用XHR来模仿表单提交
function submitData() {var xhr createXHR();xhr.onreadystatechange function () {if ( xhr.readyState 4) {if (( xhr.status 200 xhr.status 300) || xhr.status 304) {alert(xhr.responseText);} else {alert(Request was unsuccessful: xhr.status);}}};xhr.open(post, postexample.php, ture);xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);var form document.getElementById(user-info);xhr.send(serialize(form)); // serialize是标准化表单元素的函数
}// 附:serialize()
function serialize (form) {var parts [],i,len,j,optLen,option,optValue;for( i 0, len form.elments.length; i len; i ) {filed form.ekenebts[i];switch(field.type) {case select-one:case select-multiple:if(field.name.length) {for(j 0, optLen field.options.length; j optLen; j) {option field.options[j];if(option.selected) {optValue ;if ( option.hasAttribute) {optValue (option.hasAttribute(value) ?option.value : option.text);} else {optValue (option.attribute[value].specified ?option.value : option.text);}parts.push(encodeURIComponent(field.name) encodeURIComponent(optValue));}}}break;case undefined:case file:case submit:case reset:case button:break;case radio:case checkbox:if(!field.checked) {break;}default:if(field.name.length) {parts.push(encodeURIComponent (field.name) encodeURIComponent (field.value));}}}return parts.join();
}// 注:在发送相同大小数据的时候,GET请求的速度最多可达POST请求速度的2倍参考《JavaScript高级程序设计》(第3版)P436~P437 、P571~P578
