Ajax的简单介绍与使用

时间：2021-06-06 14:28:36

1.什么是Ajax?

Ajax（Asynchronous JavaScript and XML），简单说就是不需要刷新当前页面而实现javaScript和和后台服务器交换数据以更新网页中的部分内容。

2. 实现

　　第一步： 创建   XMLHttpRequest 对象，老版的IE浏览器用 ActiveXObject 对象

var request;

if (window.XMLHttpRequest){

     // code for IE7+, Firefox, Chrome, Opera, Safari

     request = new XMLHttpRequest();

}else{// code for IE6, IE5

      request = new ActiveXObject("Microsoft.XMLHTTP");

}

　　第二步：准备相关数据 ， 调用 request.open();方法，

request.open(method,url);// method是请求方式：GET/POST,url是请求目标

　　第三步：调用request.send();方法

request.send(data);// data是通过此请求要发送的数据

　　第四步：为request对象的属性onreadystatechange添加响应函数，此函数由系统触发，然后根据响应状态做出相应的处理

request.onreadystatechange = function(){

    // 判断响应是否完成

        if(request.readyState == 4){

            // 判断响应结果是否正常

        if(request.status == 200 || request.status == 304){

            /**

                request.responseText  或  request.responseXML  返回的数据，在这里做相应的处理

            */

        }

    }

}

　　至此一次Ajax通信完成！

　　　　说明：响应的返回的数据格式有三种：

　　　　html 格式，不需解析，可以直接镶嵌到页面中——不太方便；

　　　　XML 格式， 通用数据格式，占用的空间较大，解析相对困难；

　　　　JSON 格式，占用空间较小，有面向对象的特点，且有第三方  jar 包可以将java对象或集合包装成JSON字符串。

3. 用JQuery实现Ajax操作

　　对于  html  或  text  格式的数据，可直接使用 $( selector).load();方法；

$(selector).load(url,args)  // url 为请求的目标位置，默认的请求方式的GET，但args若作为第二参数时自动转换为POST方式，注意，args必须是JSON格式

　　这样返回的  responseText 会直接加载成  selector 对应节点的子元素。

　　对于XML格式和JSON格式则有 $.get(url,[args],[callback],[type]) 或 $.post(url,[args],[callback],[type]) 方法，args是要发送的数据，callback为回调函数，接受的数据在回调函数的参数 data 中，type是指以相应的数据格式接受数据；

// 这是用get方法接收XML格式的数据

$("a").click(function(){  // 为 a 标签添加 click 函数

    var url = this.href;

    $.get(url,function(data){    // data的内容就是下面XML文档的内容

        var name = $(data).find("name").text();

        var website = $(data).find("website").text();

        var email = $(data).find("email").text();

        $("#content").empty().append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")

                             .append("<a href='"+website+"'>"+website+"</a>");       // 将数据加在 id 为 content 的节点下面

    });

    return false;   // 取消  a  标签的默认操作

});
<?xml version="1.0" encoding="UTF-8"?>

<details>

    <name>Andy Budd</name>

    <website>http://andybudd.com</website>

    <email>andy@clearleft.com</email>

</details>

　　若是JSON数据，则可以用eval() 处理一下data，或者在get方法中加入 "JSON" 作为 type 参数，或直接调用$.getJSON() 方法，则得到的 data 就是一个JSON 对象。

$.get(url,args,function(data){

    // data 是JSON对象

},"JSON");

$.post(url,args,function(data){

    // data 是JSON对象

},"JSON");

$.getJSON(url,args,function(data){

    // data 是JSON对象

});

然后根据页面的需要将数据更新到页面即可！

相关文章