& & 一般来说，大家可能都会习惯用JQuery提供的Ajax方法，但是用原生的js怎么去实现Ajax方法呢？
& & JQuery提供的Ajax方法：
1 $.ajax({
dataType: '',
success: function(){
error: function(){
　　原生js实现Ajax方法：
1 var Ajax={
get: function (url,fn){
var obj=new XMLHttpRequest();
// XMLHttpRequest对象用于在后台与服务器交换数据
obj.open('GET',url,true);
obj.onreadystatechange=function(){
if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) { // readyState==4说明请求已完成
fn.call(this, obj.responseText);
//从服务器获得数据
obj.send(null);
post: function (url, data, fn) {
var obj = new XMLHttpRequest();
obj.open("POST", url, true);
obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 发送信息至服务器时内容编码类型
obj.onreadystatechange = function () {
if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {
// 304未修改
fn.call(this, obj.responseText);
obj.send(data);
1,open() 方法需要三个参数:
　第一个参数定义发送请求所使用的方法（GET 还是 POST）。与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
　第二个参数规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)。
　第三个参数规定应当对请求进行异步地处理(true（异步）或 false（同步）)。
2,send() 方法可将请求送往服务器。
3,onreadystatechange 属性存有处理服务器响应的函数。
4,readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
& & 通过学习对XMLHttpRequest对象又熟悉了一些，哈哈
阅读(...) 评论()1.post方式
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&&/title&
window.onload = function(){
var selProvince =
document.getElementById("selProvince");
var city =
document.getElementById("city");
selProvince.onchange = function(){
//第一步：新建对象 new
if( window.ActiveXObject){
// 以Microsoft IE的方式创建
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
new ActiveXObject("Microsoft.XMLHTTP");
xhr = new XMLHttpRequest();
//第二步：对象的open()
xhr.open("post","01.php",true);
//POST方式需要自己设置http的请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//第三步： 发送数据， post方式发送数据
xhr.send("province="+selProvince.value);
xhr.onreadystatechange = function(){
if( xhr.readyState ==4 && xhr.status==200){
city.innerHTML = xhr.responseT
xhr.responseText )
&select name="selProvince" id="selProvince"&
&option value="吉林省"&1吉林省&/option&
&option value="辽宁省"&辽宁省2&/option&
&option value="山东省"&山东省3&/option&
&select name="city" id="city"&
$province = $_GET['province'];
$province = $_POST['province'];
switch ($province){
case '吉林省':
$cities = '&option&长春&/option&'.
'&option&吉林&/option&'.
'&option&四平&/option&'.
'&option&辽源&/option&'.
'&option&通化&/option&';
case '辽宁省':
$cities = '&option&沈阳&/option&'.
'&option&大连&/option&'.
'&option&鞍山&/option&'.
'&option&抚顺&/option&'.
'&option&本溪&/option&';
case '山东省':
$cities = '&option&济南&/option&'.
'&option&青岛&/option&'.
'&option&日照&/option&'.
'&option&潍坊&/option&'.
'&option&威海&/option&';
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Ajax
var glo={};
glo.tool={};
glo.ui ={};
glo.tool.ajaxGetMethod=
( url,data,successFun){
//第一步：新建对象
xhr = new XMLHttpRequest();
catch(ieXHR)
// 以Microsoft IE的方式创建
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
new ActiveXObject("Microsoft.XMLHTTP");
//第二步：对象的open()。注意：post方法接着要设置setRequestHeader（），get方法注意这里url?传参，
if( data ){
// method=="get"
url+="?"+data/*+"&"+new Date().getTime()*/;
xhr.open("get",url,true);
//第三步： 注意：POST方式发送数据，而get方法这里发送null数据（通过open()方法传参数的 &url?+数据 -发送）
xhr.send( null );
//第四步：
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
successFun && successFun( xhr.responseText );
alert("出错啦！"+ xhr.status)
//ajax方法应用
glo.ui.ajaxDealSel= function(){
var selProvince =
document.getElementById("selProvince");
var city =
document.getElementById("city");
selProvince.onchange = function(){
//GET 中文乱码解决： encodeURI（中文）
glo.tool.ajaxGetMethod(
"01_GET.php", "province="+encodeURI(selProvince.value),function(s ){
city.innerHTML =
window.onload = function(){
glo.ui.ajaxDealSel();
&select name="selProvince" id="selProvince"&
&option value="吉林省"&1吉林省&/option&
&option value="辽宁省"&辽宁省2&/option&
&option value="山东省"&山东省3&/option&
&select name="city" id="city"&
$province = $_GET['province'];
// $province = $_POST['province'];
switch ($province){
case '吉林省':
$cities = '&option&长春&/option&'.
'&option&吉林&/option&'.
'&option&四平&/option&'.
'&option&辽源&/option&'.
'&option&通化&/option&';
case '辽宁省':
$cities = '&option&沈阳&/option&'.
'&option&大连&/option&'.
'&option&鞍山&/option&'.
'&option&抚顺&/option&'.
'&option&本溪&/option&';
case '山东省':
$cities = '&option&济南&/option&'.
'&option&青岛&/option&'.
'&option&日照&/option&'.
'&option&潍坊&/option&'.
'&option&威海&/option&';
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title& ajax
var glo={};
glo.tool={};
glo.ui ={};
//ajax的封装-方法-
glo.tool.ajaxMethod=
(method,url,data,successFun){
//第一步：新建对象
xhr = new XMLHttpRequest();
catch(ieXHR)
// 以Microsoft IE的方式创建
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
new ActiveXObject("Microsoft.XMLHTTP");
//第二步：对象的open()。注意：post方法接着要设置setRequestHeader（），get方法注意这里url?传参，
if(method==="get" && data ){
url+="?"+data+"&"+new Date().getTime();
xhr.open(method,url,true);
if(method!="get"
//另外：POST方式需要自己设置http的请求头:声明发送数据的类型，该设置也解决了中文乱码问题
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//第三步： 注意：POST方式发送数据，get方法发送null数据
if(method==="get"
) xhr.send( null ); else
xhr.send( data );
//第四步：
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
successFun && successFun( xhr.responseText );
alert("出错啦！"+ xhr.status)
//ajax方法应用
glo.ui.ajaxDealSel= function(){
var selProvince =
document.getElementById("selProvince");
var city =
document.getElementById("city");
selProvince.onchange = function(){
// glo.tool.ajaxMethod( "post","01.php", "province="+selProvince.value,function(s )
glo.tool.ajaxMethod( "get","01_GET.php", "province="+selProvince.value,function(s )
city.innerHTML =
window.onload = function(){
glo.ui.ajaxDealSel();
&select name="selProvince" id="selProvince"&
&option value="吉林省"&1吉林省&/option&
&option value="辽宁省"&辽宁省2&/option&
&option value="山东省"&山东省3&/option&
&select name="city" id="city"&
阅读(...) 评论()原生JS与jQuery对AJAX的实现 - 简书
原生JS与jQuery对AJAX的实现
原址：一、定义W3C里这么解释AJAX：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。就是利用JS来无刷新与后端交互，通过get和post方式把数据发送到后端，或者请求后端的数据，然后根据请求的数据进行改变DOM节点等操作，从而取消掉用form的submit方式一提交就会跳转页面的情况，像在创建账号的时候检测此用户名是否存在就是一个典型的案例，本文讲从原生JS和jQuery方面介绍AJAX的实现，跨域问题暂且不表。二、原生JS实现AJAX所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。1.GETvar xmlhttp = new XMLHttpRequest();xmlhttp.open("GET","demo_get.php?id=1&name=lemoo&t=" + Math.random(),true);xmlhttp.send();
传递参数直接在?后指定，多个参数用&分隔
GET请求同一URL时会有缓存，通过参数是否一致来判断
解决缓存问题，加个时间戳使每次参数不一致，上例中的t=Math.random()
2.POSTvar xmlhttp = new XMLHttpRequest();xmlhttp.open("POST","ajax_test.php",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Bill&lname=Gates");xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseT } }
POST没有缓存
POST发送的数据量大
AJAX无法发送文件
readyState改变时触发onreadystatechange事件，4为完成
status是返回状态，200是成功，404是未找到页面
responseText是返回的数据，为字符串格式
三、jQuery实现AJAX1.GET使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：$.get(url,[callback])
$.get("demo_test.php?id=1&name=lemoo",function(data,status){ alert("Data: " + data + "\nStatus: " + status); });
参数通过URL传递
2.POST与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：$.post(url,[data],[callback])
$.post("demo_test.php",{ num:1},function (data) { alert(data);});
使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：$(selector).serialize()
3.ajax使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下：$.ajax([settings])其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。$.ajax({ type:"post", url:"demo_test.php", data: { num: 123 }, dataType:"text", success: function (data) { alert(1); }});
4.getJSON使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中，它的调用格式为：$.getJSON(url,[data],[callback])可以与$.each搭配来遍历数据$.getJSON("demo_test.php",function(data){ $.each(data, function (index, sport) { if(index==3) $("ul").append("" + sport["name"] + ""); });});
这样返回的数据直接就是JSON格式的就可以使用，但是要注意缓存问题。四、AJAX的调试在运行AJAX的页面按F12(Chrome下)，进入“Network”选项卡，点击"XHR"过滤器，然后触发AJAX的事件。
点击要进行调试的AJAX动作，进入详情页。
Request URL:查看请求的地址，一般在这里查看向后台请求的URL是否正确，错误404的话一般这里会有问题
Request Method:请求的方式，查看是GET或者POST，GET请求的参数一致的话会有缓存
Status Code:返回状态。一般是200正常；404未找到页面，一般是URL错误，或者后台没有创建相应的action；500内部服务错误，多为后台错误。
底下的Query String Parameters是向后台发送的数据，一般这里看参数是否有问题，格式及命名是否正确，事故多发地。
点击Response就可以查看服务器返回的数据了，一般在这里查看返回是否正常，格式是否正确，一般是JSON。
基本上通过发送的数据及传回的数据就能定位问题所在了。五、总结一般来说，处理AJAX，用jQuery的get和post的就够用，如果是JSON数据的话用getJSON，注意缓存问题，特殊的应用再考虑用ajax()，另外，AJAX还有一个很严重的问题是跨域，这个以后再说。Ajax实现步骤_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Ajax实现步骤
上传于|0|0|文档简介
&&Ajax实现步骤
阅读已结束，如果下载本文需要使用2下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩1页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢