ajax学习笔记(原生js的ajax)

ajax是一个与服务器端语言无关的技术，可以使用在任何语言环境下的web项目(如JSP，PHP，ASP等)。

ajax优点：

1）页面无刷新的动态数据交互

2）局部刷新页面

3）界面的美观

4）对数据库的操作

ajax使用

第一步：创建ajax引擎(获取XMLHttpRequest对象)

不同浏览器内核，获取XMLHttpRequest对象方法不一样。所以在创建ajax引擎之前需要先判断浏览器内核。

主流浏览器内核有：IE浏览器，火狐浏览器(Firefox)

创建方法一：

var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP’);
//第一个适用于火狐内核(Firefox)，第二个适用于IE

View Code

创建方法二：

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

View Code

第二步：通过创建的XMLHttpRequest对象准备发送请求到指定服务器页面

if(xmlhttp){ //检测XMLHttpRequest对象是否创建成功(若对象为null对象返回false)
            xmlhttp.open("get/post","URL",true/false);
            //调用XMLHttpRequest对象的open方法准备向服务器发送请求
            //参数一：请求的方式；(string)
            //参数二：发送ajax请求的URL；(string)
            //参数三：是否使用异步机制处理；(bool)
            //回调函数得知数据是否返回完成(数据是否全部获取)
            xmlhttp.onreadystatechange = function(){
                //实时监测数据交互状态(状态改变的事件触发器)
                //该事件在数据交互时会被反复调用
                //调用过程中会实时返回当前执行的状态
                if(xmlhttp.readyState == 4){
                    //通过readyState属性获取当前状态
                    //若当前状态为4则表示数据全部返回
                    if(xmlhttp.status == 200){ //通过status属性获取http返回的状态码(200表示成功)
                        //第四步：开始处理返回的数据(结果)
                        //根据具体需求进行处理
                        //通过responseText属性获取返回报文
                    }
                }
            }

View Code

第三步：向服务器发送请求

xmlhttp.send();      //调用XMLHttpRequest对象的send()方法发送请求
        //send()方法的参数也可以用了传递数据(post请求下)

View Code

最后附上一个完整版：

function ajax(method, URLdata, dispose) {
    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject('Microsoft.XMLHTTP');
    xmlhttp.open(method, URLdata, true);
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200 || xmlhttp.status == 300) {
                dispose(xmlhttp.responseText);
            }
        }
    }
    xmlhttp.send();
}

View Code

扩展——ajax处理Json格式数据

使用JSON.parse()方法将Json字符串转换为JS对象。

var Json = JSON.parse(json字符串)；

var r = JSON.parse(xmlhttp.responseText);
alert(r[0].Name);

View Code

转换为js对象的json可以直接点出对象的属性；如果是集合，使用下标取对象。

ajax学习笔记(原生js的ajax)

推荐阅读