10.入门第十课:AJAX原理及实战技术(正式版)

前端之家收集整理的这篇文章主要介绍了10.入门第十课:AJAX原理及实战技术(正式版)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、需要一个套路:

每次都写这么一大堆的代码,是不是要规范一下呢?

三方面的工作,写成三个函数,工作会有条理些:

1、创建XHR对象(比上一版进行了增强)


var xhr;//全局变
function createXhr(){
    if (window.XMLHttpRequest)
    {// 针对 IE7+,Firefox,Chrome,Opera,Safari
      xhr=new XMLHttpRequest();
    }
else
  {// 针对 for IE6,IE5
      xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }
}

函数可以被反复调用


2、设定工作参数及绑定函数

button.onclick=function(){
createXhr();//很方便吧!
xhr.open("GET","url?参数1=值1");//设定工作参数
xhr.onreadystatechange=callback;//设定回调函数,"callback"是函数名
    xhr.send(null);
}

button是举个例子,代表界面中的一切可能事件!


3,回调函数的定义:

function callback(){
    if(xhr.status==200){//代表着服务器正常响应(还记得@R_502_448@吗)
        if(xhr.readyState==4){
            alert(xhr.responseText);//对返回结果的一切可能处理,都在此处
        }
    }
}

以上三部分代码组合到一起,就是全部AJAX的代码


二、POST请求怎么办?

xhr.open("POST","url");//此时请求参数不附加在url后面
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设定请求头,必须做!
xhr.send("fname=Bill&lname=Gates");//请求参数在这里

猜你在找的Ajax相关文章