Ajax基础--JavaScript实现
ajax原理
1、ajax
即“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），也就是无刷新数据读取。
通俗地讲就是：AJAX 通过在后台与服务器交换少量数据的方式，允许在不重新加载整个页面的情况下，对网页的一部分内容进行数据更新。
2、http 请求
http（超文本传输协议）是一个基于请求与响应模式的、无状态的、应用层的协议。
这里需要了解 http 请求的两个方法：GET方法 和 POST方法。
①、GET 用于获取数据。GET 是在 URL 中传递数据，它的安全性低，容量低。
②、POST 用于上传数据。POST 安全性一般，容量几乎无限。
PS：有兴趣的同学可以参考Http协议详解
3、XMLHttpRequest
XMLHttpRequest 是一个用于在后台与服务器交换数据的对象。目前几乎所有浏览器支持该对象。
XMLHttpRequest是ajax技术的核心部分，在javascript中就是利用XMLHttpRequest对象来实现ajax功能，以便给用户带来好的体验，其他的方法实现ajax功能也都是实现此功能。
XMLHttpRequest常用的方法、属性：
①、open()方法：用于向服务器发送一个请求；该方法有3个参数，第一个参数表示发送请求的方式（即连接服务器的方式）即“GET”或“POST”，第二个参数表示要请求的URL地址，第三个参数表示是否以异步方式发出请求，若为true则表示是异步，否则为同步。
②、send()方法：发送请求。
③、onreadystatechange 事件：紧跟其后是一个函数名或是一个匿名函数，发送请求以后XMLHttpRequest对象一直处于等待状态，直到服务器响应后激发 onreadystatechange事件，紧跟其后的方法就是当XMLHttpRequest对象的onreadystatechange事件激发之后 的客户端方法。
④、readyState属性：XMLHttpRequest对象的请求状态，返回的是整数（0-4），具体意思如下：
0（未初始化）：还没有调用 open() 方法。
1（载入）：已调用 send() 方法，正在发送请求。
2（载入完成）：send() 方法完成，已收到全部响应内容。
3（解析）：正在解析响应内容。
4（完成）：响应内容解析完成，可以在客户端调用。
⑤、status：请求结果，返回 200 或者 404。
200 => 成功。
404 => 失败。
⑥、responseText：返回内容，即我们所需要读取的数据。注意：responseText 返回的是字符串。
实现例子
1、创建 ajax 对象
在创建对象时，要考虑浏览器兼容性问题，即IE浏览器和非IE浏览器（如firefox、chrome等）：
var ajaxObj=null; if(window.XMLHttpRequest){ ajaxObj = new XMLHttpRequest();//IE6以上及非IE浏览器 }else if(window.ActiveXObject){ ajaxObj = new ActiveXObject('Microsoft.XMLHTTP');//IE6以下的IE浏览器 }else{ throw new Error('no ajax object available.'); }
2、连接服务器
这里就用上面讲到的open方法。
ajaxObj.open('GET',URL,true); 3、发送请求
ajaxObj.send();
4、接受数据
ajaxObj.onreadystatechange=function(){ if(ajaxObj.readyState==4){ if(ajaxObj.status==200){ funSucc(ajaxObj.responseText);//funSucc是获取成功时处理的函数 }else{ if(funFaild){ funFaild();//funFaild是获取失败时处理的函数 } } } };
将以上代码连起来：
function ajax(url, funSucc, funFaild){ //1.创建ajax对象 var ajaxObj = null; if(window.XMLHttpRequest){ ajaxObj = new XMLHttpRequest(); }else if(window.ActiveObject){ ajaxObj = new ActiveXObject("Microsoft.XMLHTTP"); }else{ throw new Error('no ajax object available.') } //2.连接服务器 ajaxObj.open('GET', URL, true);//open(方法, url, 是否异步) //3.发送请求 ajaxObj.send(); //4.接收返回 ajaxObj.onreadystatechange = function(){ //OnReadyStateChange事件 if(ajaxObj.readyState == 4){ //4为完成 if(ajaxObj.status == 200){ //200为成功 funSucc(ajaxObj.responseText) }else{ if(funFaild){ funFaild(); } } } }; }
最后是一个简单实例：
<!DOCTYPE HTML> <html> <head> <title>ajax基础</title> </head> <body> 点击按钮的时候，读取abc.txt<input id="btn" type="button" value="读取"/><br/> <div id="con"></div> </body> </html> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn'); var oCon = document.getElementById('con'); oBtn.onclick = function(){ ajax('abc.txt',function(str){ oCon.innerHTML = str; }); } } </script>
abc.txt 内容：
这是ajax调用的内容1。 这是ajax调用的内容2。 这是ajax调用的内容3。 总结：
利用纯javascript实现ajax效果的主要步骤如下：
1、根据浏览器类型实例化XMLHttpRequest对象
2、利用XMLHttpRequest对象向服务器发出一个动态请求
3、编写XMLHttpRequest对象接收服务器的响应时要执行客户端代码，在客户端做一些设置来响应客户端操作
4、编写服务器方法，用于处理客户端请求并作出响应。
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
