实例讲解使用原生JavaScript处理AJAX请求的方法
Ajax 是异步的JavaScript和XML的简称，是一种更新页面某部分的机制。它赋予了你从服务器获取数据后，更新页面某部分的权力，从而避免了刷新整个页面。另外，以此方式实现页面局部更新，不仅能有效地打造流畅的用户体验，而且减轻了服务器的负载。
下面是对一个基本的 Ajax 请求进行剖析：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);
在这里， 我们创建了一个能向服务器发出 HTTP 请求的类的实例。然后调用其 open 方法，其中第一个参数是 HTTP 请求方法，第二个参数是请求页面的 URL。最后，我们调用参数为 null 的 send 方法。假如使用 POST 请求方法（这里我们使用了 GET），那么 send 方法 的参数应该包含任何你想发送的数据。
下面是我们如何处理服务器的响应：
xhr.onreadystatechange = function(){
var DONE = 4; // readyState 4 代表已向服务器发送请求
var OK = 200; // status 200 代表服务器返回成功
if(xhr.readyState === DONE){
if(xhr.status === OK){
console.log(xhr.responseText); // 这是返回的文本
} else{
console.log("Error: "+ xhr.status); // 在此次请求中发生的错误
}
}
}
onreadystatechange 是异步的，那么这就意味着它将可在任何时候被调用。这种类型的函数被称为回调函数——一旦某些处理完成后，它就会被调用。在此案例中，这个处理发生在服务器。
示例
便捷的 Ajax 方法也是不少人依赖 jQuery 的原因，但实际上原生 JavaScript 的 Ajax api 也很强大，并且基本的使用在各个浏览器中的差异不大，因此完全可以自行封装一个 Ajax 对象，下面是封装好的 Ajax 对象：
// Ajax 方法
// 惰性载入创建 xhr 对象
function createXHR(){
if ( 'XMLHttpRequest' in window ){
createXHR = function(){
return new XMLHttpRequest();
};
} else if( 'ActiveXObject' in window ){
createXHR = function(){
return new ActiveXObject("Msxml2.XMLHTTP");
};
} else {
createXHR = function(){
throw new Error("Ajax is not supported by this browser");
};
}
return createXHR();
}
// Ajax 执行
function request(ajaxData){
var xhr = createXHR();
ajaxData.before && ajaxData.before();
// 通过事件来处理异步请求
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 ){
if( xhr.status == 200 ){
if( ajaxData.dataType == 'json' ){
// 获取服务器返回的 json 对象
jsonStr = xhr.responseText;
json1 = eval('(' + jsonStr + ')'),
json2 = (new Function('return ' + jsonStr))();
ajaxData.callback(json2);
// ajaxData.callback(JSON.parse(xhr.responseText)); // 原生方法，IE6/7 不支持
} else
ajaxData.callback(xhr.responseText);
} else {
ajaxData.error && ajaxData.error(xhr.responseText);
}
}
};
// 设置请求参数
xhr.open(ajaxData.type, ajaxData.url);
if( ajaxData.noCache == true ) xhr.setRequestHeader('If-Modified-Since', '0');
if( ajaxData.data ){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( ajaxData.data );
} else {
? ?
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send( null );
}
return xhr;
}
function post(ajaxData){
ajaxData.type = 'POST';
var _result = request(ajaxData);
return _result;
}
function get(ajaxData){
ajaxData.type = 'GET';
ajaxData.data = null;
var _result = request(ajaxData);
return _result;
}
下面给出一个使用例子：
index.html
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>原生 JavaScript 实现 Ajax</title>
<link rel="stylesheet" type="text/css" media="all" href="./common/common.css" />
<style>
#content {text-align: center; font-family: 'lucida Grande', 'Microsoft Yahei'}
#content .btn_ctr {display: block; width: 120px; height: 30px; margin: 0 auto 20px; background: #53a7bb; color: #fff; font-weight: bold; font-size: 14px; line-height: 30px; text-decoration: none;
border-radius: 4px;
}
#test {width: 280px; height: 130px; margin: 0 auto; padding: 15px; background: #fff; border-radius: 4px; text-align: left; }
</style>
</head>
<body>
<div id="header">
<div id="header-content">
<div id="header-inside">
<p class="go-to-article"><a href="http://kayosite.com/css3-animation.html" title="打开原文" target="_blank" >Back To Article</a></p>
<p class="go-to-blog"><a href="http://kayosite.com" title="进入我的博客 Kayo's Melody" target="_blank" >My Blog</a></p>
<p class="copyright">Demo By Kayo © Copyright 2011-2013</p>
</div>
<h1>CSS3 Animation</h1>
</div>
</div>
<div id="content">
<a class="btn_ctr" href="javascript:;" onclick="get({url: './ajax.html', callback: function(out){document.getElementById('test').innerHTML = out;}})">Ajax 获取内容</a>
<div id="test"></div>
</div>
<script>
// Ajax 方法，这里不在重复列出
</script>
</body>
</html>
ajax.html
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>ajax</title> </head> <body> <p>成功获取到这段文本</p> </body> </html>
具体的效果可以浏览完整 Demo 。
相关推荐
-
使用Ajax生成的Excel文件并下载的实例
很久沒有寫文章啦,今天分享一個如何在ASP.NET MVC里使用Ajax下載生成文件的方法,以下只是個人心得: 大家都應該知道,在ASP.NET MVC里,如果通過Ajax調用后臺控制器時,可以返回一個JSON對象,但并不能直接返回文件(除非刷新頁面,那就不是Ajax啦),所以如果想用Ajax生成文件并下載的話,那只要將生成的文件先保存到服務器上,然後再將文件路徑通過JSON返回,之後才可以進行下載,當然由於是暫時性存放,所以當下載完后就需要馬上刪除相應的文件. 以下是做法以動態生成Excel為
-
ThinkPHP中ajax使用实例教程
本文实例讲述了ThinkPHP中使用ajax的方法,提交表单如下图所示: 点击提交,不需要刷新本页,将内容提交到数据库当中,并在本页显示提交的内容.如下图所示: 一.jquery实现方法: MessageAction.class.php页面代码如下: <?php class MessageAction extends Action{ function index(){ $this->display(); } function add(){ //ajaxReturn(数据,'提示信息',状态)
-
Ajax和$.ajax使用实例详解(推荐)
实例一(Ajax请求基本创建格式): <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ajax练习(GET,不考虑浏览器兼容性)</title> <script type="text/JavaScript"> function doRequest() { //不考虑浏览器兼容性问题 var
-
jQuery ajax中使用confirm,确认是否删除的简单实例
jQuery ajax 中使用confirm ,确认是否删除按钮 onclick="return confirm('确认删除?');" <script type="text/javascript"> $(function(){ $("#btnDelete").click(function(){ //var user8ID = $.trim( $('#user8ID').val() ); var statu = confirm(&quo
-
jQuery使用$.ajax提交表单完整实例
本文实例讲述了jQuery使用$.ajax提交表单的方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199
-
jQuery Ajax使用实例
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的差异了. $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二.$.ajax的参数描述 参数 描述 url 必需.规定把
-
实例详解angularjs和ajax的结合使用
这是一篇关于easyui配合ajax使用的文章,顺带介绍angularjs的使用以及让你感受到angularjs的威力.网上对于ajax 的文也是多如牛毛 .我就不直接从那种原生的httpxmlrequest 对象的js 写起了哈.看那种东西也存粹是了解 高层的东西是怎么来的 原理是啥真正做的时候写那种东西 不是扯淡么 你叼你技术牛逼整站的代码你全用那种写.html js 这种东西最开始设计出来就没考虑周全就是坨屎.还好现在有各种框架 可以帮助我们更容易的把这坨屎做的更美味.也还好由于互联网事业
-
AJAX和JSP混合使用方法实例
首先要知道AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分
-
实例讲解使用原生JavaScript处理AJAX请求的方法
Ajax 是异步的JavaScript和XML的简称,是一种更新页面某部分的机制.它赋予了你从服务器获取数据后,更新页面某部分的权力,从而避免了刷新整个页面.另外,以此方式实现页面局部更新,不仅能有效地打造流畅的用户体验,而且减轻了服务器的负载. 下面是对一个基本的 Ajax 请求进行剖析: var xhr = new XMLHttpRequest(); xhr.open('GET', 'send-ajax-data.php'); xhr.send(null); 在这里, 我们创建了一个能向服务
-
原生javascript的ajax请求及后台PHP响应操作示例
本文实例讲述了原生javascript的ajax请求及后台PHP响应操作.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table id="t">
-
php判断是否为ajax请求的方法
本文实例讲述了php判断是否为ajax请求的方法.分享给大家供大家参考,具体如下: 先说前端使用 jQuery 时怎么区分: jQuery 发出 ajax 请求时,会在请求头部添加一个名为 X-Requested-With 的信息,信息内容为:XMLHttpRequest 在后端可以使用 $_SERVER["HTTP_X_REQUESTED_WITH"] 来获取.(注意:中划线换成了下划线,不区分大小写) 由此,我们可以这样来判断是否为 ajax 请求: if(isset($_SERV
-
Javascript发送AJAX请求实例代码
一个对AJAX的封装 //url就是请求的地址 //successFunc就是一个请求返回成功之后的一个function,有一个参数,参数就是服务器返回的报文体 function ajax(url,successFunc) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open("POST",url,true); xhr.onr
-
原生JavaScript实现AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接服务器 发送请求 接收响应数据
-
原生js jquery ajax请求以及jsonp的调用方法
ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,则需要一直等待 异步:多条任务并发执行,也就是一个任务的开启,不需要等待其他任务执行结束,效率较高 ajax的语言载体是JavaScript,最大的特点是页面不刷新 1.获取ajax对象 主流浏览器获取方式:火狐.谷歌.
-
原生JavaScript实现Ajax的方法
首先为大家分享了原生JavaScript实现Ajax代码,供大家参考,具体内容如下 var getXmlHttpRequest = function() { if (window.XMLHttpRequest) { //主流浏览器提供了XMLHttpRequest对象 return new XMLHttpRequest(); } else if (window.ActiveXObject) { //低版本的IE浏览器没有提供XMLHttpRequest对象 //所以必须使用IE浏览器的特定实现A
-
AngularJS实现ajax请求的方法
本文实例讲述了AngularJS实现ajax请求的方法.分享给大家供大家参考,具体如下: [HTML 代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1"> &
-
js与jQuery终止正在发送的ajax请求的方法
本文实例讲述了js与jQuery终止正在发送的ajax请求的方法.分享给大家供大家参考,具体如下: 核心:调用XMLHttpRequest对象上的abort方法 jquery的ajax方法有自己的超时时间设置参数: $.ajax({type:'POST', url:'b.php', data:'', timeout:5000, success:function(){ } }) 同时 1. $.get返回的数据类型是XMLHttpRequest,请参考手册.($.post.$.ajax.$.get
-
jQuery实现监控页面所有ajax请求的方法
本文实例讲述了jQuery实现监控页面所有ajax请求的方法.分享给大家供大家参考,具体如下: 你是不是有遇到这样的问题:页面发起两个ajax请求,希望它们都成功以后,再做一个动作? 很容易想到的解决方案是,等其中一个结束以后,再发起另外一个,这个过程用回调函数来完成. 但是,如果其中一个ajax请求的代码不是你写,你改不了,怎么办? 又或者说,你只想知道某个url请求什么时候结束,不想管其他的请求,怎么弄? <!DOCTYPE html> <html lang="en&quo