Ajax原理-原生js的XMLHttpRequest对象意义
Ajax是对Asynchronous JavaScript + XML的简写，这一技术能够向服务器请求额外的数据而无需卸载页面，会带来很好的用户体验。Ajax技术的核心是XMLHttpRequest(简称XHR)对象，XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器府区区获取更多信息而不必刷新页面。使用XML对象取得新数据然后在通过DOM将新数据插入到页面中。
一：XMLHttpRequest对象
IE5是第一款引入XHR对象的浏览器，XHR对象是通过MSXML库中的一个ActiveX对象实现的。因此，在IE中可能会遇到三种不同版本的XHR对象：MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0 。例如：
function createXHR(){
if(typeof arguments.callee.activeXString != 'string'){
var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp','MSXML2.XMLHttp.3.0'];
for(var i=0; i<versions.length; i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(e){
console.log('no');
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}这个函数会根据IE中可用的MSXML库的情况创建最新版本的XHR对象，IE7Firefox、Opera、Chrome和Safari都支持原生的XHR对象，在这些浏览器中创建XHR对象要这样：var xhr = new XMLHttpRequest();,加入你想支持IE7及更高的版本，那么，大可丢掉前面定义的哪个函数，而只用原生的XHR实现。但是，如果你必须要使用IE更早的版本，可以在这个createXHR()函数中加入原生XHR对象的支持。
function createXHR() {
if(XMLHttpRequest) {
return new XMLHttpRequest();
} else if(ActiveXObject) {
if(typeof arguments.callee.activeXString != 'string') {
var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp', 'MSXML2.XMLHttp.3.0'];
for(var i = 0; i < versions.length; i++) {
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch(e) {
console.log('no');
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("No XHR object available");
}
}二：XHR的用法？
使用XHR对象时，要调用的第一个方法是open()，例如：
xhr.open('get','somfile.txt',false);
xhr.send(null);这里send()方法，如果不需要向请求主体发送数据，最好传入null参数，因为这个参数对有些浏览器来说是必须的。
由于这次响应式同步的，所以，js代码会等到服务器响应之后再继续执行。收到响应后，响应数据会自动填充XHR对象的属性，相关属性如下：
responseText：作为响应主体被返回的文本；
responseXML：作为相应的内容类型是text/xml或application/xml，这个属性中将保存包含着相应数据的XMLDOM文档；
status：相应的http状态；
statusText：http状态的说明。
在接收到响应之后，第一步检查status属性，当xhr.status为200时候，说明接受成功，当xhr.status为304的时候，表示请求的资源没有被修改，可以直接使用浏览器中缓存的版本。代码如下：
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
document.getElementById("myDiv").innerHTML = xhr.responseText;
} else {
"Request was unsuccessful: " + xhr.status;
} 异步用法
大多数情况下我们是要发送异步请求，才能让JavaScript继续执行当前的活动阶段。取值如下：
0：未初始化，尚未调用open()方法。
1.启动。已经调用open()方法，但尚未调用send()方法。
2.发送，已经调用send()方法，为接受到响应。
3.接受。已经接受部分响应数据。
4.完成。全部接受响应的数据，并且可以在客户端使用。
只要readyState属性的值发生改变，都会触发一次onreadyStateChange事件。代码如下：
function loadXMLDoc() {
var xhr = createXHR();
xhr.onreadystatechange = function() {
console.log(xhr)
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
document.getElementById("myDiv").innerHTML = xhr.responseText;
} else {
"Request was unsuccessful: " + xhr.status;
}
}
xhr.open('GET', 'somfile.txt', true);
xhr.send(null);
}另外，在接收到响应之前，还可以调用abort()方法，取消异步请求：xhr.abort();
三：用setRequestHeader设置自定义请求头
这个方法接受两个参数：头部字段的名称和头部字段的值。服务器在接受到这种自定义的头部信息之后，可以执行后续操作，建议使用，否则可能会影响到服务器的响应。
function loadXMLDoc(){
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState==4 || xhr.status==200){
document.getElementById("myDiv").innerHTML = xhr.responseText;
}else{
"Request was unsuccessful: " + xhr.status;
}
}
xhr.open('GET','somfile.txt',true);
xhr.setRequestHeader('MyHeader','MyValue');
xhr.send(null);
}四：GET请求
对XHR而言，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。
使用GET请求经常会发生的一个错误，就是查询字符串格式有问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾，而且所用名-值对都必须由&分割，如下面所示：
<body>
name:
<input type="text" name="name">
<br> book:
<input type="text" name="book">
<br>
<input type="button" id="submit" value="submit" >
</body>
<script type="text/javascript">
function createXHR() {
if (XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return new ActiveXObject('Microsoft.XMLHTTP');
}
};
//get方式，键值对加工
function addURLParam(url, name, value) {
url += (url.indexOf('?') == -1 ? '?' : '&');
url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
return url;
}
//模拟表单提交
function formSubmit() {
//获取文本框节点
var names = document.querySelectorAll('input')[0].value;
var books = document.querySelectorAll('input')[1].value;
console.log(names)
var xhr = createXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 || xhr.status == 200) {
console.log(xhr.responseText)
}
}
var url = '01.php';
//添加参数
url = addURLParam(url, 'name', names);
url = addURLParam(url, 'book', books);
console.log(url)
//初始化请求
xhr.open("get", url, true);
xhr.send(null);
}
var sub = document.getElementById('submit');
sub.onclick = function(){
formSubmit();
}
</script>五：POST请求
服务器对post请求不一样的，因此，服务器端必须有程序来读取发送过来的原始数据，并从中解析出有用的部分：首先，将Content-Type头部信息设置为application/x-www-form-urlencoded,也就是表单提交时的内容类型，其次是以适当的格式创建一个字符串，如果需要将POST数据进行序列化以便服务器方便处理，就需要XMLHttpRequest2级定义的FormData类型。即：
var data = new FormData();
data.append('name','bangbang');
... ...
xhr.open('post','02.php',true);
var form = document.getElementById('form1');
xhr.send(new FormData(form));当然，我们可以用自定义的serialize()函数来处理。
例如：
<body>
<form id="form1">
name:
<input type="text" name="name">
<br> book:
<input type="text" name="book">
<br>
<input type="button" id="submit" value="submit">
</form>
<div id="con"></div>
</body>
<script type="text/javascript">
//序列化函数
function serialize(form) {
var parts = [],
field = null,
option,
optValue;
for (var i = 0; i < form.elements.length; i++) {
field = form.elements[i];
switch (field.type) {
case "select-one":
case "select-multiple":
if (field.name.length) {
for (var j = 0; j < field.options.length; j++) {
option = field.options[j];
if (option.selected) {
optValue = '';
if (optioin.hasAttribute) {
optValue = (option.hasAttribute('value') ? option.value : option.text);
} else {
optValue = (option.attributes['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('&');
}
function createXHR() {
if (XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return new ActiveXObject('Microsoft.XMLHTTP');
}
};
function formSubmit() {
var xhr = createXHR();
console.log(xhr.readyState);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 || xhr.status == 200) {
console.log(xhr.responseText);
document.getElementById('con').innerHTML = xhr.responseText;
}
}
//初始化请求
xhr.open("post", '02.php', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var form = document.getElementById('form1');
console.log(serialize(form));
xhr.send(serialize(form));
}
var sub = document.getElementById('submit');
sub.onclick = function () {
formSubmit();
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
