锋利的jquery 笔记第6章 ajax

最新推荐文章于 2017-09-02 21:53:00 发布

totogogo

最新推荐文章于 2017-09-02 21:53:00 发布

阅读量2.2k

点赞数

分类专栏： WEB 2.0 文章标签： jquery xmlhttprequest ajax callback jsonp function

本文链接：https://blog.csdn.net/totogogo/article/details/5646564

版权

WEB 2.0 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Jquery Ajax

传统的 javascript ajax例子

//通过这个函数来异步获取信息

function Ajax(){

　 var xmlHttpReq = null; //声明一个空对象用来装入 XMLHttpRequest

　 //IE5 IE6是以 ActiveXObject的方式引入 XMLHttpRequest的

　 if (window.ActiveXObject){

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

　 }

//除 IE5 IE6 以外的浏览器 XMLHttpRequest是 window的子对象

　 else if (window.XMLHttpRequest){

xmlHttpReq = new XMLHttpRequest();//实例化一个 XMLHttpRequest

}

if(xmlHttpReq != null){ //如果对象实例化成功

xmlHttpReq.open("GET","test.php",true); //调用 open()方法并采用异步方式

xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数

xmlHttpReq.send(null); //因为使用 get方式提交，所以可以使用 null参调用

}

function RequestCallBack(){//一旦 readyState值改变，将会调用这个函数

if(xmlHttpReq.readyState == 4)

if(xmlHttpReq.status == 200)

//将 xmlHttpReq.responseText的值赋给 ID为 resText 的元素

document.getElementById("resText").innerHTML = xmlHttpReq.responseText;

}

</script>

由于 jquery对 ajax进行了封装，因此 jquery开发 ajax变得极其简单。

Jquery提供了下列 ajax的方法：

· $.ajax() 这是最底层的方法，给予更多控制，但要你写的代码也更多

· load(), $.get(), $.post() ，这 3个是第二层的方法

· $.getScript() and $.getJSON() 方法，这 2个是第三层的方法

注意： load 方法的回调函数是不论成功与否都调用，而 $.get(), $.post(), $.getScript() and $.getJSON() 的回调函数只有 response 的状态是 success 才会调用该方法

load() 方法

尽管使用 load() 可以获取动态和静态的文件，但通常用于获取静态文件。

任何 jquery 对象都可以调用 load 方法。当 jquery 对象调用 load 方法后，就用 load 回来的 data 作为该 jquery 对象的 content 。

注意： load方法和其他 ajax的方法（如 $.ajax() ， $.get(), $.post() ， $.getScript() and $.getJSON() ）不同，其他的 ajax 方法都是 jquery 的全局函数，不需要跟随任何的 jquery 对象，而 load() 则是对 jquery 对象进行操作的。

load方法的格式： load( url, [data], [callback] )

其中

url：是指要导入文件的地址

data： (可选 ) 要导入的是动态文件时，我们可以把要传递的参数放在这里

callback： (可选 ) 请求完成时的回调函数，无论请求成功或失败

例：

$(function(){

$("#send").click(function(){

$("#resText").load("test.html"); //load test.html作为 #resText的 content

})

Load方法还可以对 load入的内容进行筛选后显示。例如下面代码就是只显示 test.html里的 class为 para的内容

$("#resText").load("test.html .para");

如果要传递参数，那就要通过 load()的 data参数。

如：

$("#resText").load("test.html .para",{name: “rain”, age: “30”} , function (){//..});

注意：如果有 data 参数，那么就会以 POST 的形式传递，如果没有 data 参数则以 GET 方式传递

$("#resText").load("test.html .para", function (){//..});

注意：上面的 load方法只有 url and callback２个参数也可以

回调方法参数

$("#resText").load("test.html",

　　 function (responseText, textStatus, XMLHttpRequest) {

alert( $(this).html() ); //$(this)指的是当前 dom对象，即 $("#iptText")[0]

alert(responseText); //请求返回的内容

alert(textStatus); //请求状态： success， error

alert(XMLHttpRequest); //XMLHttpRequest对象

});

$.get() 和 $.post() 方法

load方法通常用来获取静态文件。要获取动态数据，通常用 $.get(), $.post() or $.getJSON()

注意： load() 则是对 jquery 对象进行操作的，而其他的 ajax 方法都是 jquery 的全局函数，不需要跟随任何的 jquery 对象。

$.get()是用 GET方式来进行异步请求

$.post()是用 POST方式来进行异步请求

$.get()的格式是：　 $.get( url [, data] [, callback] [, type] )

其中

url：是请求的 url

data： (可选 ) 发送到 server的 key/value数据会以 querystring附加到请求的 url中

callback： (可选 ) 载入成功时的回调元素（只有 response 的状态是 success 才会调用该方法，这一点和 load 不一样 ,load 的回调方法是不论成功与否都调用）

type: (可选 ) 服务器返回的 response的格式，包括 xml, json, html, text, script

$.post()的格式和 $.get()完全相同。

使用 $.get()且返回值类型为 html的例子：

$.get("get1.php",

{ // 传递的参数

username : $("#username").val() ,

content : $("#content").val()

function (data, textStatus){ // 回调函数

//data: 返回的内容，可以是 xml, html, json

//textStatus: 请求状态 :success/error/timeout/notmodified

$("#resText").html(data); // 把返回的数据添加到页面上

}

);

返回 xml的例子（和上面代码唯一不同的是回调函数里对 data的处理方式）

function (data, textStatus){

var username = $(data).find("comment").attr("username");

var content = $(data).find("comment content").text();

var txtHtml = "<div class='comment'>"+username+":"+content+"</div>";

$("#resText").html(txtHtml);

}

注意：由于要求服务器端返回的是 xml，因此需要在服务器端设置 content-type

header("Content-Type:text/xml; charset=utf-8"); //php

返回 json的例子

（和上面代码不同的是回调函数里对 data的处理方式，而且 $.get方法使用第四个参数为 ”json”）

$.get("get1.php",

{ // 传递的参数

username : $("#username").val() ,

content : $("#content").val()

function (data, textStatus){ // 回调函数

var username = data.username;

var content = data.content;

var txtHtml = "<div class='comment'>"+username+":"+content+"</div>";

$("#resText").html(txtHtml);

}, “json”

);

$.getJSON 方法

用于异步获取 json数据。其回调函数通常只有 data 一个参数

$.getJSON(url, data, callback) 等价于 $.get(url, data, callback, “json”)

例子：

$.getJSON ("get1.php",

{ // 传递的参数

username : $("#username").val() ,

content : $("#content").val()

function (data){ // 回调函数，通常只有 data 一个参数

var username = data.record1;

　 // 。。。

}

);

对于返回的 json data，我们可以用 jquery的全局函数 $.each()来进行遍历。

全局函数 $.each() 可以用来遍历对象（包含 json 对象）或数组

$.each()不同于 jquery对象的 each()方法，它是全局函数，不操作 jquery对象。

$.each() 是以要遍历的对象 / 数组作为第一个参数，以回调函数作为第二个参数。回调函数有２个参数，第一个为对象成员 / 数组的索引，第二个为对应于索引的 element 。

例：

$.getJSON('test.json', function(data){

$.each( data , function(i, item) {

html += item['p1'] + ':' + item['p2'];

$('#resText').html(html);

})

});

$.getScript 方法

用于异步加载 javascript文件。

$.getScript(url, data, callback) 等价于 $.get(url, data, callback, “script”)

有时候，在页面初次加载时就取得所需的全部 javascript文件是没有必要的。虽然可以在需要哪个 javascript文件时，动态的创建 <script>标签， jquery代码如下：

$(document.createElement(“script”)).attr(“src”,”test.js”).appendTo(“head”);

或

$(“<script type=’text/javascript’ src=’test.js’/>”).appendTo(“head”);

但这种方式并不理想。为此， jquery提供了 $.getScript()方法来直接加载 .js文件。与加载一个 html片段一样简单方便，并且不需要对 javascript文件进行处理， javascript会自动执行。

代码如下：

$(function(){

$('#send').click(function() {

$.getScript('test.js');

});

})

$.getScript()方法也可以有回调方法，回调方法的参数通常为空

$.getScript('test.js',

function() {

alert('javascript loaded');

}

);

$.ajax() 方法

略，有空再研究

JSONP

什么是 JSONP?

由于安全方面的考虑， Javascript包括 ajax 被限制了跨域访问的能力。而 JSONP 则可以使得 Javascript and ajax 实现跨域访问。 JSONP是一个非官方的协议，它允许在服务器端集成 Script tags返回至客户端，通过 javascript callback 的形式实现跨域访问。

JSONP 的原理

Jsonp 实际上是利用动态载入 javascript ，同时动态加载的 javascript 会自动运行来实现跨域访问。我们先看看下面这个最简单的例子，然后再详细讲解。

demo.html

<html>

<head>

function say(words) {

alert(words);

}

</script>

</head>

<body>

</body>

</html>

demo.js

say("Hello!");

运行 demo.html 文件后就会弹出“ Hello!”的警告框了？你可能会觉得这个例子很简单，没什么了不起的，甚至会在想：这和 JSONP 有关系吗？那么，我可以很肯定的告诉你：有关系！而且，这个例子实际上就是 JSONP 的原型！你也许会想到， JSONP 不是访问远程数据的吗？对，试想一下，如果 demo.js 文件在其它域的服务器上呢？结果是一样的，不会有 javascript无法跨域访问的问题。例如你把上面的 demo.html存到 local，然后把 demo.js放到一个服务器上，再修改 demo.html里的 <body>下的 <script>的 src属性指向服务器里的 demo.js，同样会弹出“ Hello!”的警告框。

demo.js 文件的内容是对一个函数（通常称之为：回调函数）的调用，而需要交互的数据则通过参数形势进行返回 。所以通过 JSONP 访问的服务器需要提供一个可以设置回调函数名的接口，就像 http://demo.hpyer.cn/php/jsonp.php?callback=say 中的 callback ，所以，综上所述 JSONP 是需要服务器端的支持的

那么我们把上面

1. demo.js 变成 demo.php/demo.jsp，

2. 把 demo.js 里的“ say”换成回调函数

3. 把 demo.js 里的“ Hello!”换成要返回的实际数据（必须是 json 格式！ ）

就是一个典型的 jsonp例子

demo.html

<html>

<head>

function myCallBack (jsonData) {

alert(jsonData.name);

}

</script>

</head>

<body>

src=" http://xxx/demo.php?jsoncallback=myCallBack "></script>

</body>

</html>

demo.php

<?php

$callback= isset($_GET['jsoncallback']) ? $_GET['jsoncallback'] : '';

$json=’{

“name”: “tomson”,

“age”: 30

}’;

echo $callback . '(' . $json . ')';

JQuery Ajax 通过 JSONP 进行跨域访问

Jquery使用 jsonp有 2个条件：

1. 通常使用 $.getJSON() 方法

2. $.getJSON() 的参数 url必须包含参数“ jsoncallback=? ” , 这个问号会被 jQuery 自动替换为 getJSON() 方法里的回调函数的函数名 （如果是一个匿名函数， jQuery 会自动生成一个带时间戳的函数名 ）

$.getJSON("http://xxx/demo.php?jsoncallback=?",

function(data) {

$('#result').val(data.name);

});

注意： JSONP 的实现方法并不是只有回调函数一种，还有其它方式，例如将数据赋值给一个变量等。

序列化元素

serialize() 方法

我们常常通过 ajax技术异步提交表单。例如：

$("#send").click(function(){

$.get("get1.php",

{

username: $(“#username”).val(),

content: $(“#content”).val(),

function (data, textStatus){

$("#resText").html(data);

}

);

})

上述方式对于少量字段的表单就适用，但对于大量的表单字段，这样逐个逐个字段传递参数，就会缺乏弹性。 Jquery为这一常用的操作提供了一个简化的方法—— serialize()，

serialize() 也是作用于 jquery 对象上，它能够将 dom 元素的内容序列化为字符串，用于 ajax 请求。例如上述代码等价于：

$("#send").click(function(){

$.get("get1.php",

$(“#form1”.serialize() ,

function (data, textStatus){

$("#resText").html(data);

}

);

})

即使表单里增加字段，上面代码依然有效，不需要添加代码。

注意：上述代码有效的原因是， $.get() 方法的 data 参数不仅可以使用映射方式，如

{

username: $(“#username”).val(),

content: $(“#content”).val(),

}

也可以使用字符串形式，如

“username=”+encodeURIComponent($(‘#username’).val())

+“content=”+encodeURIComponent($(‘#content’).val())

用字符串方式时，需要注意对字符编码（中文问题），如果不希望编码带来麻烦，就应该使用 serialize 方法，它会自动编码 。

因为 serialize方法作用于 jquery对象，所以不光只有表单能使用他，其他选择器选取的元素也能使用它。如

$(“:checkbox,:radio”).serialize();

上述代码是把复选框和单选框的值序列化为字符串形式，只会将选中的值序列化

serializeArray() 方法

它是一个与 serialize很类似的方法， serializeArray() 不是返回字符串，而是将 DOM 元素序列化之后，返回 JSON 格式的数据。

既然返回的是一个 json object，那么就可以使用 $.each将其迭代输出。例如

var fields = $(":checkbox,:radio").serializeArray() ;

console.log(fields);// Firebug 输出

$.each( fields, function(i, field){

$("#results").append(field.value + " , ");

});

$.param() 方法

它是 serialize()方法的核心，用来对一个数组或对象按照 key/value进行序列化。比如将一个普通的对象序列化：

var obj = {a:1,b:2,c:3};

var k = $.param(obj) ;

alert(k); // 输出 a=1&b=2&c=3

jquery 中的 Ajax 全局事件

jquery简化 ajax操作不仅体现在调用 ajax方法和处理响应方面，而且还体现在对调用 ajax方法的过程中的 http请求的控制。通过 jquery 提供的一些自定义全局函数，能够为各种与 ajax 相关的事件注册回调函数。例如当 ajax 请求开始时，会触发 ajaxStart () 方法的回调函数；当 Ajax 请求结束时，会触发 ajaxStop () 方法的回调函数。这些方法都是全局的方法，因此无论创建它们的代码位于何处，无论是哪个 jquery 对象 call these ajax 全局事件的方法，只要有 ajax 请求发生时，就会触发它们 。

例如，如果用 ajax加载大图片会比较慢，我们应该在 ajax请求开始时显示“ loading”， ajax请求结束后隐藏“ loading”。代码如下：

$(“#loading”).ajaxStart(function() { // 无论哪里 call ajax 都会触发该事件

$(this).show(); //$(this) 指 id 为 loading 的元素

});

$(“#loading”).ajaxStop(function() {// 无论哪里 call ajax 结束都会触发该事件

$(this).hide();

});

注意：如果在此页面的其他地方也使用 ajax ，该提示信息任然有效，因为它是全局的。

jQuery的 ajax有下列全局事件：

l ajaxStart(callback) Ajax 请求开始时执行的函数

l ajaxStop(callback) Ajax 请求结束时执行的函数

l ajaxComplete(callback) Ajax 请求完成时执行的函数

l ajaxError(callback) Ajax 请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递

l ajaxSend(callback) Ajax 请求发送前执行的函数

l ajaxSuccess(callback) Ajax 请求成功时执行的函数

如果想使某个 ajax 请求不受全局事件的影响，那么可以在使用 $.ajax(options) 方法时，将参数中的 global 设置为 false 。代码如下：

$.ajax ({

url: “test.html”,

global: false // 不触发全局 ajax 事件

})

totogogo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
锋利的jquery 笔记第6章 ajax

<br /><!-- /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;}@font-face
复制链接

扫一扫