最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Javascritp中XMLHttpRequest实现AJAX笔记
时间：2013-11-01 编辑：简简单单 来源：一聚教程网
AJAX
对于WEB开发者来说，AJAX这个词一点也不陌生，现在说说大概会想到以下几点：
•无刷新改变页面数据
•异步通信
•$.ajax、$.get、$.post
•Asynchronous Javascript And XML
•...
AJAX就是一种交互式的网页应用技术，主要目的的提升用户体验，其原理是利用 Javascript的XMLHttpRequest对象与服务器通信获取数据后填充在页面中，从而实现不刷新整个页面却能把信息反馈给用户的效果。
通常使用的AJAX
我们通常使用的AJAX应该绝大多数都是jQuery封装好的，所以时间久了我们会对jQuery 形成很大的依赖。而且，在有些使用场景里，我们只用到了AJAX却把整个jQuery文件包含进来，这样会影像网页的加载时间（在用户网络不好的情况下更糟糕）。
所以，掌握原生的AJAX写法还是很有必要的，不仅能摆脱jQuery的依赖，还能进一步加深对异步通信的理解。如果抽时间再去研究XMLHttpRequest对象那就更赞了。
原生的AJAX
•生成XMLHttpRequest对象
| 代码如下 | 复制代码 |
| var XMLReq; if (window.XMLHttpRequest) { XMLReq = new XMLHttpRequest(); } else { XMLReq = new ActivateXObject('Microsoft.XMLHTTP'); } |
|
在IE浏览器里没有XMLHttpRequest这个对象，要使用 ActivateXObject('Microsoft.XMLHTTP')来替代。
•向服务器发送请求
| 代码如下 | 复制代码 |
|
// for GET method // for POST method |
|
上面代码中XMLReq.open()的第三个参数就是控制是否异步请求的，当为true的时候就是我们说的异步通信，为false的时候就按照正常的javascript逻辑顺序执行。真正异步的目的就是在向服务器请求数据的时候不影响正常的javascript代码执行，否则一旦请求时间过长或者出错可能影响整个页面的浏览。
•处理服务器响应数据
| 代码如下 | 复制代码 |
|
XMLReq.onreadystatechange = function () { |
|
一个完整的AJAX请求过程可以对照XMLReq.readyState参数清晰的理解清楚，不同的值表示过程如下：
readyState 过程变化
0 请求未初始化
1 服务器连接已建立
2 请求已接收
3 请求处理中
4 请求已完成，且响应已就绪
Simple Demo
ajax.html
| 代码如下 | 复制代码 |
|
|
|
ajax_get.html
| 代码如下 | 复制代码 |
|
I am ajax get data
|
|
本文意在抛砖引玉，有空的时候能看一看原生的东西，尽管比较复杂。
使用XMLHttpRequest 实现ajax效果
这里我们用客户端通过XMLHttpRequest 请求服务端获取当前系统时间，实现异步交互！
客户端myAjax.html代码：
| 代码如下 | 复制代码 |
|
|
|
服务端GetDate1.ashx 代码 (用ashx文件来处理 ,不需要HTML代码,只需服务端处理返回数据 )
| 代码如下 | 复制代码 |
|
|
|
-
上一个： jquery实现上传图片本地预览效果
相关文章
- ajax入门教程之XMLHttpRequest与$.ajax使用说明 07-24
- AJAX XMLHttpRequest 对象使用详解 (一) 08-06
- ajax XMLHttpRequest详解 06-30
- ajax入门教程:AJAX XMLHttpRequest 10-31
- XMLHttpRequest的兼容代码 ajax 兼容创建代码 09-02
- HTML简单购物数量小程序代码展示 10-31