Ajax在jQuery中的应用

Ajax

 

Ajax是 Asynchronus JavaScript and XML 的缩写，其核心是通过XMLHttpRequest对象，以一种异步的方式，向服务器发送请求，并通过该对象接收请求返回的数据，从而完成人机交互的数据操作。

 

jQuery中的load方法

load(url,[data],[callback])

url为被加载的页面地址

[data] 为发送到服务器的数据

[callback] 加载成功后，返回加载页面的回调函数。

 

script

$("#button1").click(){

    $("#divTip").load("b.html");

}

 

b.html中的divContent元素

$("#divTip").load("b.html.divContent");

 

全局函数 getJSON()

$.getJSON(url,[data],[callback])

url请求地址

[data] 为发送到服务器的数据

[callback] 加载成功后，返回加载页面的回调函数。

 

 

script

$("#button1").click(){

     $.getJSON("UserInfo.json",function(data){

        $("#divTip").empty(); //清空标记中的内容

        var strHTML="";//初始化保存内容变量

       $.each(data,function(InfoIndex,Info){

            strHTML+="姓名："+Info["name"]+"<br>";

            strHTML+="性别"+Info["sex"]+"<br>";

            strHTML+="邮箱"+Info["email"]+"<br>";

            }

        $("#divTip").html(strHTML);//显示处理后的数据

}

}

 

UserInfo.json

 

[{

"name":"JACK",

"sex":"男",

"email":cc@cc.com"

},

{

"name":"Mack",

"sex":"男",

"email":mack@cc.com"

}]

 

全局变量 getScript()

全局变量 getScript()实现异步获取数据

$("#button").click(

function(){

    $.getScript("UserInfo.js")

        });

 

UserInfo.js

 var data=[

  {

  "name":"Jack",

  "sex":"男",

  "email":“jack@jack.com”

  },

  {

  "name":"lucy",

  "sex":"女",

  "email":" lucy@lucy.com"

}];

 

var strHTML="";//初始化保存内容变量

  $.each(data , function () {   //遍历获取的数据

          strHTML+="姓名："+this["name"]+"<br>";

          strHTML+="性别："+this["sex"]+"<br>";

          strHTML+="邮箱："+this["emai"l]+"<br>";

        })

$("#divHTML").html(strHTML); //显示处理后的数据

 

与所有全局变量一样，getScript() 也有一个回调函数，该回调函数在文件加载后执行，

如代码“$.getScript("UserInfo.js”,function(){ alert{ " 加载成功 " }; }); 表示在文件加载成功后，弹出对话框“加载成功”