原生Ajax那些事儿
前面是简介，代码部分在中间。Ajax介绍Ajax（Asynchronous Javascript And XML：异步Javascript和XML）在2005年2月被提出。不过Ajax并不是一种新的语言或技术。实际上，它由几种已知的技术组合而成。Ajax技术的核心是XMLHttpRequest。 XMLHttpRequest 它是整个Ajax技术的灵魂。Ajax技术的核心就是异步发送请求，而XMLHttpRequest则是异步发送请求的对象。 Ajax的工作方式 异步是Ajax技术的核心。对于传统的web应用，每次用户发送请求，向服务器提交或获得新数据时，浏览器都会完全丢弃当前页面，而重新加载新的页面。而原本页面中很多内容是不需要重新提交的（假设需要获取的仅仅是表格数据），这样不仅会浪费很多服务器资源，更可怕的是，在服务器完全响应之前，用户浏览器一片空白（这时要断网了就尴尬了。。），用户的动作必须中断。而异步指的是用户发送请求后，完全无需等待，请求在后台发送，不会堵塞用户当前活动。用户无需等到第一次请求得到完全响应，就可以再次请求。 XMLHttpRequest的属性和方法（以下简称xhr）XMLHttpRequest的属性
XMLHttpRequest的方法
介绍部分就到这里了，有点枯燥有点累。下面是代码环节，哈哈哈 一次ajax请求XMLHttpRequest的兼容写法 在IE低版本浏览器中，仍然不支持XMLHttpRequest对象。在我的测试中（IETest），XMLHttpRequest是可以支持到IE7的。更低的版本（IE6、IE5）是不可以的。所以就有了兼容性写法，使用这种简单的写法，在IE6以及IE5.5（IETest所支持的最低版本）是可以得到支持的。如下代码： try{
xhr = new XMLHttpRequest();
}catch(e){
xhr = new ActiveXObject( 'Microsoft.XMLHTTP' );
}
是的，上面这种写法支持IE6以及IE5.5（IETest）测试。可能还是有很多人为了兼容IE低版本喜欢这种写法， var MSXML = ['MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for (var i = 0; i < MSXML.length; i++ ) {
if ( new ActiveXObject( MSXML[i] ) ) {
xhr = new ActiveXObject( MSXML[i] );
document.getElementById("box").innerHTML = xhr;
break;
}
}
我尝试过，这种写法无法兼容（除非 ‘Microsoft.XMLHTTP’ 写在最前面，IETest测试）。不知道是怎么回事。 GET请求 表单默认的提交方式是get，除非自己另外设置了post提交方式。另外，表单有个属性enctype，是提交的数据格式。 <form action="1.get.php">
<input type="text" name="username" />
<input type="text" name="age" />
<input type="submit" value="提交" />
</form>
如果是手动提交，则将要提交的数据名称和数据值用=连接，如果有多个的话，用&进行连接，然后把数据放到url?后面传到指定页面。不管是表单提交还是手动提交，在url上我们都可以看到数据，所以这是不安全的。由于兼容性原因，建议在get请求时send()中传入 ‘null’。 xhr.open('get','1.get.php?name=real&age=20',true);
xhr.send(null);
1.get.php <?php header('content-type:text/html;charset=utf-8'); $username = $_GET['username']; $age = $_GET['age']; echo "你的名字是$username,年龄是$age " ; ?>
另外，在IE中，get请求在手动提交（不是表单提交，比如点击一个普通按钮发送一个ajax请求）还有两个问题。分别是缓存（IE11没有缓存这个问题，IE11以下都会有。表单提交没有）和无法解析中文（表单提交没有这个问题）。无法解析中文在所有浏览器都是。 缓存 IE11以下浏览器会缓存http请求（IE11不会，谷歌49不会，ff48竟然也会缓存。。只测试了这三个）。如果是手动提交，如果是相同的请求，即使是服务器端改变了相应的内容，但是客户端收到的内容仍然不变。解决的方法是在请求的后面加上一个随机参数，随机数 window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(e){
xhr = new ActiveXObject( 'Microsoft.XMLHTTP' );
}
xhr.open( 'get','1.get.php?username=皖林&age=20&'+new Date().getTime(),true);
xhr.send(null);
xhr.onreadystatechange = function () {
if ( xhr.readyState === 4 ) {
if ( xhr.status === 200 ) {
document.getElementById("box").innerHTML += xhr.responseText;
}
}
}
}
}
无法解析中文 在使用了上述的js代码之后，会出现一个问题。会看到屏幕得到的返回值是‘你的名字是,年龄是20’，并没有显示名字。这是怎么回事呢？为什么 当然也可能看到的就是中文本身。username后面的那一串就是url编码的结果。因为form表单默认的数据格式是 所以在遇到中文的时候，我们有必要手动解析一下。 在url中看不到提交参数和值（不是form提交），但是打开chrome调试窗口的network，点击请求后可以看到Request URL： function addURLParam(url,name,value) {
url += ( ( url.indexOf('?') == -1 ) ? '?' : '&' );
url += encodeURIComponent( name ) + encodeURIComponent( value );
return url;
}
POST请求post传参时与get的不同是它的参数放在send中。也就是说，对于上述的get请求，如果是post形式，那么就是- - xhr.open('post','2.post.php',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send('username=皖林&age=30')；
可以看到，’?’后面的传的参数写在send里面，并且不用编码。因为我们已经在 ‘setRequestHeader’ 这里设置了请求头，和表单默认的数据的类型一样的。当然，post提交也没有缓存问题。 FormData 现代web应用中频繁使用的一项功能就是表单数据的序列化，XMLHttpRequest 2级（后序文章会写到）为此定义了FormData类型。FormData为序列化表单以及创建与表单格式形同的数据提供了便利。如： var data = new FormData();
data.append( 'name','value');
这个append()方法接受两个参数：键和值，分别对应表单字段和包含的值。可以向这样添加任意多个键值对。而通过向FormData构造函数中传入表单元素，也可以用表单元素的数据预先向其中传入键值对。 GET和POST的区别
对Ajax的封装（类似于jq）function ajax( options ) {
var
xhr = null,method = options.method || 'get',url = options.url,data = options.data || '',/*假设是字符串形式 name1=value1&name2=value2*/
success = options.success
;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' && ( url.indexOf( '?' ) == -1 ) && data) {
url += '?' + data;
}
xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
//ajax代码
ajax({
method: 'get',url: 'getNews.php',data: 't=' + new Date().getTime(),success:function(data) {
var data = JSON.parse( data );
var oUl = document.getElementById('ul1');
var html = '';
for (var i=0,len = data.length; i<len; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
}
})
//getNews.php
<?php
header('content-type:text/html;charset="utf-8"');
$news = array(
array('title'=>'标题1','date'=>'时间1'),array('title'=>'标题2','date'=>'时间2'),array('title'=>'标题3','date'=>'时间3'),array('title'=>'标题4','date'=>'时间4'),array('title'=>'标题5','date'=>'时间5'),);
echo json_encode($news);//json_encode — 对变量进行 JSON 编码。在java中依赖于json-lib.jar
?>
不得不说的一点是，我们如果要定期的获取服务器端的数据，那么必须使用一个定时器，每隔一定时间发送一个请求过去。这是ajax的弊端就显露出来了。每次发送请求- ->接受数据- - >再次发送请求…如此循环，每个请求都带有相同的头部信息，可能数据相对头部信息来说微不足道，但正是这些数据是我们所需要的。服务器端不停地响应请求，这就造成了资源浪费。所以出现了轮询技术（并未从根本上解决问题），和H5中的webSocket（以后可能会写相关文章），webSocket连接建立成功后（http协议转换为websocket协议），它始终只会保存一次连接，并且能做到实时推送，这样大大减少了服务器压力，在时效性上更为可观。 小结 终于到了小结的时候了，写的时间有点长。。
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |