Ajax在jQuery中应用--jQuery基础知识点(5)

Ajax(Asynchronous JavaScript and XML),其核心是通过XMLHttpRequest对象,以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而完成人机交互的数据操作。Ajax技术并不局限于Web动态页面,在普通的静态HTML页面中同样可以实现!

1. 传统的JavaScript方法实现Ajax功能
    var objXmlHttp = null; //声明一个空的XMLHTTP变量
    function CreateXMLHTTP() {
        //根据浏览器的不同,返回该变量的实体对象
        if (window.ActiveXObject) {
            objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            if (window.XMLHttpRequest) {
                objXmlHttp = new XMLHttpRequest();
            }
            else {
                alert("初始化XMLHTTP错误!");
            }
        }
    }
    function GetSendData() {
        document.getElementById("divTip").innerHTML = ""; //初始化内容
        var strSendUrl = "b.html?date="+Date(); //设置发送地址变量并赋初始值
        CreateXMLHTTP(); //实例化XMLHttpRequest对象
        objXmlHttp.open("GET", strSendUrl, true); //open方法初始化XMLHttpRequest
        objXmlHttp.onreadystatechange = function() { //回调事件函数
            if (objXmlHttp.readyState == 4) { //如果请求完成加载
                if (objXmlHttp.status == 200) { //如果响应已成功
                    //显示获取的数据
                    document.getElementById("divTip").innerHTML = objXmlHttp.responseText;
                }
            }
        }
        objXmlHttp.send(null); //send发送设置的请求 
    }
2. load( url,[data],[callback])方法实现Ajax功能
    load()方法可以很快地加载数据到页面中,但如需对获取的数据进行处理,必须在先插入页面中,然后才能进行,执行效率较低。
    例:$("#divTip").load("b.html"); //load()方法加载数据
3. getJSON( url,[data],[callback])函数获取数据
    采用将要获取的数据集另存为一种轻量级的数据交换格式,即JSON文件格式
$.getJSON("UserInfo.json", function(data) {
    $("#divTip").empty(); //先清空标记中的内容
    var strHTML = ""; //初始化保存内容变量
    $.each(data, function(InfoIndex, Info) { //遍历获取的数据
        strHTML += "姓名:" + Info["name"] + "
";         strHTML += "性别:" + Info["sex"] + "
";         strHTML += "邮箱:" + Info["email"] + "
";     })     $("#divTip").html(strHTML); //显示处理后的数据 })

4. getScript(url,[data],[callback])函数获取JS文件内容

   

你可能感兴趣的:(jQuery)