1追加html
.load(url,[data],[fn])
该方法载入远程html文件代码并插入至DOM中。默认使用GET方式传递，如果传递附加参数[data]时自动转换为POST方式。
url，待装入的html网页地址。string类型
data,可选，发送至服务器的key/value数据
fn，可选载入成功时回调函数
例如： 函数传递参数data，将以post提交
$("#feeds").load("feeds.jsp", {limit:25,fdd:"test"}, function(){
alert("The last 25 entries in the feed have been loaded");
});
.load函数函数可以请求action或某个servlet，如果servlet跳转到另外一个页面(/theTest.jsp)，那么load函数就会加载跳转到得那个页面到元素中(myload)。
jQuery("#myload").load("${pageContext.request.contextPath}/test/myServlet",{page:"test.jsp"});
下面是该servlet的doPost方法：
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
String page=request.getParameter("page");
RequestDispatcher dispatcher=null;
//跳转到另外一个页面
dispatcher=request.getRequestDispatcher("/theTest.jsp");
dispatcher.forward(request,response);
}
注释只有转发(forward)到指定的页面，该页面可以被load加载进来，如果是通过response.sendRedirect()重定向的页面就不能被load进来。
jQuery.getScript(url[,fn])
通过Http GET请求载入并执行一个javascript文件。返回值是XMLHttpRequest。
url，待载入js文件地址。
fn,成功载入后回调函数。
通过load()函数添加进来的页面如同iframe，可以通过window.parent来获得父窗口对象。
2JSON
JSON是一种轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。和xml一样，JSON也是基于纯文本的数据格式。同时json是javascript原生格式，意味着在javascript中处理json数据不需要任何特殊的API或工具包。
JSON建构于两种结构：”名称/值“对的集合，值的有序列表。
JSON具有以下这些形式：
数组，是值（value）的有序集合，一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。例如:以下数据包含了一个String,Number,Boolean和一个null
["abc",12345,false,null]
json数组的length属性返回该数组中元素的个数。
如果取超出数组长度外的元素的值为null或undefined。
对象，是一个无序的"名称/值"对集合。一个对象以{开始，以}结束。每个名称后跟一个:(冒号)。名称/值对之间使用,(逗号)分隔。其中值也可以是另一个Object或数组。JSON对象没有length属性。
例如：{"name":"Michael","address":{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}}
演示了使用JSON形式定义这个用户列表：
＜script＞
var UserList = [
{"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"},
"Email":"zhuleipro@hotmail.com"},
{"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"},
"Email":"xxx@xxx.com"},
{"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"},
"Email":"xxx2@xxx2.com"}
];
alert(UserList[0].Name.FirstName);
alert(UserList[0]['UserID']);//返回11
alert(UserList[0].UserID);//也返回11建议使用"."符号。
＜/script＞
值，可以是双引号括起来的字符串(string)，数值(number)，Boolean(true,false)，null，对象或数组
字符串String，是由双引号包围的任意数量的Unicode字符的集合。除了字符 "，\，/ 和一些控制符（\b，\f，\n，\r，\t）需要编码外，其他 Unicode 字符可以直接输出。如："abc"
Boolean，表示为true或false。此外javascript中的null被表示为null，注意true，false和null都没有双引号，否则被视为一个String。
在javascript中，json数组中元素的删除操作和javascript数组的操作是一样的。json对象就是javascript对象的删除使用delete语句，如：
var field={"name":"Michael","city":"Beijing","street":" Chaoyang Road ","postcode":100025};
delete field.name;//直接删除源json数据的name。或delete field['name']
json对象的添加和删除属性：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript">
var tt={"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}};
tt.id="111";//向json对象中添加属性
alert(tt.id);
alert(JSON.stringify(tt));
tt.id=undefined; //删除json对象的id属性(用$.each方法还是可以遍历出来)，最好用delete tt.id。
alert(JSON.stringify(tt));
</script>
</head>
<body>
</body>
</html>
也可以这样创建对象：
var test=new Object(); 或var test={};
var organid='id';
test[organid]=1111;//中括号内可以存放变量
test['name']="jackson";
alert(JSON.stringify(test));//将输出{"id":1111,"name":"jackson"}
也可以通过[]取出json对象对应的属性值，如test[organid]和test['id']都将返回1111;
JavaScript处理JSON数据
通过一个简单的JavaScript方法就能看到客户端如何将JSON数据表示给用户：
function handleJson() {
var j={"name":"Michael","address":
{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
};
document.write(j.name);
document.write(j.address.city);
}
}
js中判断对象是否是json对象：
var isjson = typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length;
alert(isjson);
标准的的json格式，要求字符串都使用双引号""来限定。jquery1.4采用标准的json格式。
//由JSON字符串转换为JSON对象，如下所示obj就是json对象了
var str="{'name':'xiaoming','sex':'male'}"
var obj = eval('(' + str + ')');
通过eval操作json对象
var obj={'name':'xiaolin'};
alert(eval('obj').name); //返回'xiaolin'
eval('obj').name='xiaoxiao';
alert(obj.name); //返回'xiaoxiao'
var str="['aa','bb','cc']";
var arrary1=eval(str);//得到str的数组对象。
**********
关于json2.js
javascript中创建json格式的数据对象的是直接将json格式的数据赋给一个var变量。如：
var o = {"name":"tn","code":"tc","children":[{"name":"c1","code":"c1"},{"name":"c2","code":"c2"}]};
这样我们创建了一个json格式的对象o,如果我们想要输出json对象的内容，需要导入json2.js。下载地址：http://www.json.org/js.html
然后将json2.js中的第一句：
alert('IMPORTANT: Remove this line from json2.js before deployment.');
注释掉，不然会出错。
然后使用json2.js中JSON.stringify(json对象);将json对象转换成一个字符串，这样就可输出json对象的内容。如下：
var s = JSON.stringify(o);
alert(s);
json2.js中的JSON.parse(json格式的字符串)转换为json对象。使用JSON.parse()方法时要注意每个属性必须用双引号括起来，否则会抛出异常。例如：
var string1='{"id":30,"name":"wjjjjj"}';
//不能写成"{'id':30,'name':'wjjjjj'}",否则会抛出异常,不能用单引号
JSON.parse(string1);
var kk=JSON.parse(string1);//将被转换为一个json对象
alert(kk.id);//将输出30
var string1='[{"id":30,"name":"wjjjjj"},{"id":60,"name":"dgfej"}]';
var kk=JSON.parse(string1);//将被转换为一个json对象
//遍历json数组
jQuery.each(kk,function(i,jobject){
alert(kk[i].name+" "+kk[i].id+" ");//将输出每个kk中的每个json对象的name属性的值和id属性的值
或者alert(field.name+" "+jobject.id+" ")
})
下面是将一个json格式的数组字符串转换成一个json对象，注意这个数组格式的字符串须用单引号括起来，且其中的数组元素用双引号括起来，数字可以不用引号括起来。
var string1='["fdfdf","dddddd",30]';
var kk=JSON.parse(string1);
jQuery.each(kk,function(i,field){
alert(field);
});
});
JSON.parse(data,function(key, value))，用于将json格式的字符串data转换为json对象，并调用function(key,value)。遍历其中的json对象，key对应每个json对象的key，value对应每个json对象的值。如：
var string1='[{"id":30,"name":"wjjjjj"},{"id":60,"name":"dgfej"}]';
var kk=JSON.parse(string1,function(key,value){
if(key=="name"){
//将输出每个json对象中key="name"对应的value的值,因此将输出wjjjjj和defej。
alert(value);
}
});
***********
3jQuery.getJSON(url,[data],[function])或$.getJSON(url,[data],[function])
该函数的返回值是XMLHttpRequest，通过Http GET请求载入JSON数据。
url(String)，发送请求地址。
data(Map),待发送的Key/value参数。
function,载入成功时回调函数。
通过JSON获得后台json格式的字符串或json对象都是可以获得的。
json格式的数据可以保存到.json的文件中。我们将以下内容(是一个JSON数组)：
[
{"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"},
"Email":"zhuleipro@hotmail.com"},
{"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"},
"Email":"xxx@xxx.com"},
{"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"},
"Email":"xxx2@xxx2.com"}
]
保存到b.json文件中。然后再javascript中通过$.getJSON('b.json')加载b.json。
jQuery.getJSON('b.json');虽然函数调用加载了文件，但是并没有告诉javascript对返回的文件中数据如何处理。为此我们还需要使用回调函数。$.getJSON()函数还需要接收一个参数，这个参数是当加载完成时调用的回调函数function。回调函数function也需要一个参数，该参数中保存着返回的数据。因此我们的代码要写成：jQuery.getJSON('b.json',function(data){...});
现在已经将b.json的数据保存到回调函数的参数data中了，那么就可使用$.each()对数据进行遍历。
jQuery.getJSON('b.json',function(data){
var xmlhttp=$.each(data,function(userIndex,user){
//userIndex参数是代表着数组的索引，user参数代表着索引对应的内容。
alert(userIndex+" "+user.Name.FirstName);
//使用$.each()遍历b.json中Name的内容。
if(user.Name){
$.each(user.Name,function(nameIndex,name){
alert(name);
});
//xmlhttp是一个XMLHttpRequest对象
})；
尽管JSON格式很简洁，但它不容许任何错误，所有方括号，花括号，引号和都好都必须合理而且适当的存在，否则文件不会加载。而且在多数浏览器中，当文件不会加载时我们都看不到错误信息。
当用$.each(data,function(m,n)方法来遍历json格式的字符串data时，如果data是json格式的数组，则m代表数据的索引，n代表索引对应的值。如果data是json格式的对象，则m代表key，n代表value。
当后台输出JSONObject或者JSONArray对象或者是String格式的字符串时，使用getJSON方法都可以得到,但是不能用get方法来得到。如果后台返回单个字符串如"123"，则getJSON也会得到单个字符串"123"。但是如果返回"null"，得到的是null，而不是字符串，进行(返回结果=="null")比较返回false，进行(返回结果==null)返回true。
例如：
jQuery.getJSON("${pageContext.request.contextPath}/admin/updTradeOrder.action",{"tradeInfoVO.parentID":13,"tradeInfoVO.showOrder":5},function(data){
....
}
当我们在后台${pageContext.request.contextPath}/admin/updTradeOrder.action输出一个JSON格式的字符串如：
public void backjson(){
String s="{'id':30,'name':'wjjjjj'}";
try{
//一定要setContentType("text/html");否则我们降到xml格式的字符串。
response.setContentType("text/html");
response.getWriter().println(s);//服务端返回json字符串
}catch(IOException ex){
ex.printStackTrace();
}
}
那么通过$.getJSON请求的回调函数参数data就是一个JSON对象，在回调函数中通过data.id便可得到返回的数据30，通过data.name便得到wjjjjj。
注意如果后台的字符串是拼接成的如：String s="{'succ':'error','info':'"+e.getMessage()+"'}";对于e.getMessage()这种字符串一定要用两个单引号包含，因为返回的字符串必须符合json格式。
4jQuery.get(url,[data],[function(data)])
该函数的返回值是XMLHttpRequest，通过Http GET请求载入信息,这个函数只是简单地取得URL指定的文件，然后将服务端返回的xml,json,html,text格式的信息传递给回调函数function的参数data中。
url(String)，发送请求地址。
data(Map),待发送的Key/value参数。会附加到请求的url中。
function,载入成功时回调函数。(只有当Response的返回状态时successs才调用该方法)
例如：
var xmlhttp=$.get("tt.jsp",{name:"lulu"},function(data){
//参数data就是服务端通过response输出的信息。
alert(data);
});
//xmlhttp是一个XMLHttpRequest对象
我们可以使用jQuery.get()方法来加载XML文件，并对XML文件的内容进行处理。在根据服务器提供的MIME类型知道响应的是XML的情况下，提供给回调函数function的将是DOM树。我们已经领略过了jQuery强大的DOM遍历能力，对XML就如同对Html文档一样，也可以使用常规的.find()，.filter()及其他遍历方法。
下面我们使用jQuery.get()方法来对b.xml进行处理
<?xml version="1.0" encoding="UTF-8"?>
<users>
<user userID="11">
<name FirstName="Truly" LastName="Zhu">
</name>
</user>
<user userID="12">
<name FirstName="Jeffrey" LastName="Richter">
</name>
</user>
<user userID="13">
<name FirstName="Jeffrey" LastName="Richter">
</name>
</user>
</users>
然后再jsp页面中的javascript编写：
jQuery.get('b.xml',function(data){
//从b.xml中查找<user>元素并遍历每个<user>元素的userID属性值。
$(data).find('user').each(function tt(){
alert($(this).attr('userID'));
});
});
jQuery.post(url,[data],[function(data)])
同上面的get方法一样，该函数的返回值是XMLHttpRequest，通过Http POST请求载入信息。
var xmlhttp=$.post("./getCode.do",{checkcode:"y"},function(data){
alert(data);
}
//xmlhttp是一个XMLHttpRequest对象
5序列化表单.serialize()方法
这个方法作用域jQuery对象，将匹配的DOM元素转换成能够随AJAX请求传递的查询字符串。一般用于<form>表单，将<form>中的数据，转换成传递的字符串。例如：
例如：
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2"
checked="checked"/> check2
<input type="radio" name="radio" value="radio1"
checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>
alert($("form").serialize());将输出：
那么$("form").serialize()结果是：single=Single&multiple=Multiple&multiple=Multple3&check=check2&radio=radio1
=号左边是元素名称右边事元素值。注意如果元素没有name属性则元素将不会转换到.serialize()方法的结果中；如果元素是disabled也不会转换到.serialize()方法的结果中,元素(checkbox,radio)没有选中不会转换到.serialize()；.serializeArray也是这样进行转换。
例如：
jQuery.post("${ctx}/manage/product/addProductType?"+$("form").serialize(),{},function(data){
closewin();
});
serialize中文乱码：
解决方法：调用decodeURIComponent(XXX,true);将数据解码
例如：
var params = jQuery("#formId").serialize(); // http request parameters.
params = decodeURIComponent(params,true);
有时候使用serialize中文乱码，但是使用serializeArray不一定中文乱码。
.serializeArray()方法
序列化表格元素 (类似 '.serialize()' 方法) 返回JSON数据结构数据对象,是一个JSON数组。
var fields = $("form").serializeArray();
//使用JQuery.each()方法输出fields对象中的每个json对象的key为name和id的值
jQuery.each( fields, function(i, field){
$("#results").append(field.name+" "+field.id+" ");
fields是一个json对象，如果想输出它的内容。需要使用json2.js中JSON.stringify(fields);方法将fileds转换成字符串来查看其内容。如：
var s = JSON.stringify(fields);
alert(s);//将输出以下内容：
[{"name":"single","value":"Single"},{"name","mutiple","value","Multiple"},{"name","mutiple","value","Multiple3"},{"name":"check","value":"check2"},{"name":"radio","value":"radio1"}]
serialize与serializeArray()都是将元素的name属性作为key，我自定义jquery函数,返回json对象的表单元素:
jQuery.fn.objParam=function(){
var data={};
var fields =this.serializeArray();
jQuery.each( fields, function(i, field){
var key=field.name;
var keyvalue=$.trim(field.value);
if(keyvalue!=""){
data[key]=keyvalue;
}
});
return data;
};
jQuery.param(obj, [traditional])
返回值:String，将json数组或者对象序列化。是.serialize()的核心方法。
objArray<Elements>, jQuery, Object数组或jQuery对象会按照name/value对进行序列化，普通对象按照key/value对进行序列化。
traditional (可选)Boolean是否使用传统的方式浅层序列化。默认为false。
var params = { width:1680, height:1050 };
var str = jQuery.param(params);
$("#results").text(str);//结果:width=1680&height=1050
对比两种traditional序列化方式:
var myObject = {
a: {
one: 1,
two: 2,
three: 3
},
b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);//深层次序列化
var recursiveDecoded = decodeURIComponent($.param(myObject));
alert(recursiveEncoded);
alert(recursiveDecoded);
//a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
//a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3
var shallowEncoded = $.param(myObject, true);//浅层次序列化
var shallowDecoded = decodeURIComponent(shallowEncoded);
alert(shallowEncoded);
alert(shallowDecoded);[]D&b=1&b=2&b=3
//a=[object+Object]&b=1&b=2&b=3
//对于中文$.param使用encodeURIComponent进行了编码
var data={userId:12,name:'张三',englishN:'zhangsan'}
alert($.param(data))
userId=12&name=%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD&englishN=zhangsan
例如使用$.param将数组传递到后台：
var data={};
data.items=[1,2,3];
$.ajax({
type: "post",
url: "test.do",
dataType: "JSON",
data: $.param(data.items)
});
后台使用String[] items=request.getParameterValues("items")得到传递过来的数组。
6 ajax事件
Ajax请求会产生若干不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件：局部事件 和 全局事件。局部事件就是在每次的Ajax请求时在方法内定义的，例如：
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});
全局事件是每次的Ajax请求都会触发的全局事件可以如下定义：
$("#loading").bind("ajaxSend", function(){
$(this).show();
}).bind("ajaxComplete", function(){
$(this).hide();
});
或者：
$("#loading").ajaxStart(function(){
$(this).show();
});
.ajaxStop(function)
Ajax事件，Ajax请求结束时执行函数function。返回一个jQuery对象。
.ajaxStart与.ajaxStop可以把它们添加给任何JQuery对象，无论它们的代码位于何处，当Ajax通信发生时都需要调用它们。
$(document).ready(function (){
$('#d2').ajaxStart(function(){
//this代表的是$("#d2")的dom对象
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
});
ajaxStart(callback)，AJAX 请求开始时执行函数。Ajax 事件。
ajaxSend(callback)，AJAX 请求发送前执行函数。Ajax 事件。
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("<li>开始请求: " + settings.url + "</li>");
});
ajaxSuccess(callback)，AJAX 请求成功时执行函数。Ajax 事件。
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("<li>请求成功!</li>");
});
ajaxComplete(callback)，AJAX 请求完成时执行函数。Ajax 事件。
$("#msg").ajaxComplete(function(event,request, settings){
$(this).append("<li>请求完成.</li>");
});
ajaxStop(callback)，AJAX 请求结束时执行函数。Ajax 事件。
$("#loading").ajaxStop(function(){
$(this).hide();
});
我们可以在特定的请求将全局事件禁用，只要设置下 global 选项就可以了：
$.ajax({
url: "test.html",
global: false,// 禁用全局Ajax事件.
// ...
});
.ajaxError(function)
Ajax事件，Ajax请求发生错误时执行函数function。返回一个jQuery对象
function (event, XMLHttpRequest, ajaxOptions, thrownError) {
// thrownError 只有当异常发生时才会被传递
this; // 监听的 dom 元素
}
ajax事件的顺序如下：
ajaxStart 全局事件
开始新的Ajax请求，并且此时没有其他ajax请求正在进行。.ajaxStart(function())
beforeSend 局部事件
当一个Ajax请求开始时触发。如果需要，你可以在这里设置XHR对象。
ajaxSend 全局事件
请求开始前触发的全局事件，.ajaxSend([function(event,xhr,options)])
success 局部事件
请求成功时触发。即服务器没有返回错误，返回的数据也没有错误。
ajaxSuccess 全局事件
全局的请求成功。.ajaxSuccess(function(event,xhr,options))
event - 包含 event 对象
xhr - 包含 XMLHttpRequest 对象
options - 包含 AJAX 请求中使用的选项
error 局部事件
仅当发生错误时触发。你无法同时执行success和error两个回调函数。
ajaxError 全局事件
全局的发生错误时触发.ajaxError(function(event,xhr,options,exc))
event - 包含 event 对象
xhr - 包含 XMLHttpRequest 对象
options - 包含 AJAX 请求中使用的选项
exc - 包含 JavaScript exception
complete 局部事件
不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件。
ajaxComplete 全局事件
全局的请求完成时触发，ajaxComplete(function(event,xhr,options))
ajaxStop 全局事件
当没有Ajax正在进行中的时候，触发。.ajaxStop(function())
局部事件回调的参数在文档中写的很清楚了，这里就不累述了。
全局事件中，除了ajaxStart和ajaxStop之外，其他的事件都有3个参数
event, XMLHttpRequest, ajaxOptions
第一个是事件，第二个是XHR对象，第三个参数最有用，是当时调用这个ajax的时候的参数。
对于ajaxError,还有第四个参数thrownError，只有当异常发生时才会被传递。
如果在将全局ajax卸载js文件中，加载执行则可以这样写,要使用$(document)，如果换成$("body")等其他元素则全局事件无效：
$(document).ajaxSend(function(evt,request,setting){
alert(setting.url);
});
例如ajaxSuccess：
$(document).ajaxSuccess(function(evt,request,setting){
var responseText=request.responseText;
//如果发现用户超时就提示用户登录并ajax中断请求
if(responseText=='timeoutError'){
//提示登录
top.openLogin(null, null);
request.Abort();//中断ajax请求。避免后面的ajax事件方法继续执行
}
});
7动态加载javascript文件
根据请求注入<script>标签，由于jQuery能帮我们插入新的DOM元素，因此向文档注入<script>标签非常简单。
$(document.createElement('script')).attr('src','http://eample.com.example.js').appendTo('head');
8JQuery.ajax(options)
通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。
$.ajax() 只有一个参数options,它是key/value的形式。options的内容,它的所有选项都是可选的：我们也可以自己添加一些key/vlaue，然后再complete,success对应的函数中通过this.key来取得key对应的vlaue。
async (Boolean) : (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(jqXHR, settings)(Function) : 发送请求前可修改XMLHttpRequest对象的函数，如添加自定义HTTP头。XMLHttpRequest对象是唯一的参数。返回的false将取消该请求。第二个参数是当时调用这个ajax的时候的参数。例如：
function (XMLHttpRequest,settings) {
alert(settings.url);//表示本次ajax请求的url
this; // 调用本次AJAX请求时传递的options参数
}
cache (Boolean) : (默认: true,dataType为script时默认为false) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete(jqXHR, textStatus)(Function) : 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串。
function (XMLHttpRequest, textStatus) {
this; // 调用本次AJAX请求时传递的options参数
}
success (Function) : 请求成功后回调函数。参数：服务器返回数据，数据格式。
function (data, textStatus) {
// data 可能是 xmlDoc, jsonObj, html, text, 等等...
this; // 调用本次AJAX请求时传递的options参数
}
contentType (String) : (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataFilter (Function) ：给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function (data, type) {
// 对Ajax返回的原始数据进行预处理
return data // 返回处理后的数据
}
dataType (String) : 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串
error (Function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数：XMLHttpRequest 对象、错误信息、（可选）捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常 textStatus 和 errorThrown 之中
// 只有一个会包含信息
this; // 调用本次AJAX请求时传递的options参数
}
username (String) : 用于响应HTTP访问认证请求的用户名
password (String) : 用于响应HTTP访问认证请求的密码
type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
url (String) : (默认: 当前页地址) 发送请求的地址。
jsonp (String)：在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
jsonpCallback (String)：为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。
scriptCharset (String)：只有当请求时dataType为"jsonp"或"script"，并且type是"GET"才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。
processData (Boolean) : (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
timeout (Number) : 设置请求超时时间（毫秒）。此设置将覆盖全局设置。
global(Boolean):是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
例如：加载并执行一个 JS 文件。
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
例如：保存数据到服务器，成功时显示信息。
$.ajax({
type: "POST",
url: "some.action",
data: "name=John&location=Boston",
test: "00",//自己添加的一个key/value
success: function(msg){
alert( "Data Saved: " + msg );
alert(this.test);//将输出00。
}
});
例如：同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
$.ajax({
url: "some.php",
async: false
data: "name=John&location=Boston",//或data:{"name":"John","location":"Bostom"}
success: function(msg){
alert( "Data Saved: " + msg );
}
});
例如：
function loadGravidaBloodPressureMessage() {
$.ajax({
url: "P8_M80_request.xml",
type: "POST",
async: true, // ajax 异步方式执行
dataType: "xml",
test:"ttt",
complete: loadGravidaBloodPressureData, // 读取数据成功后执行
contentType: "text/xml; charset=utf-8"
});
return false;
}
function loadGravidaBloodPressureData(xmlHttpRequest, status)
{
alert(this.test);//结果为"ttt"
var request_xml_doc = xmlHttpRequest.responseXML;
// 设置会员ID
$(request_xml_doc).find('[nodeName=msg\\:member]').find('[nodeName=id]').text(member_id);
//设置起始日期和结束日期
$(request_xml_doc).find('[nodeName=msg\\:datefilter]').find('[nodeName=com\\:begindate]').text(begin_date);
$(request_xml_doc).find('[nodeName=msg\\:datefilter]').find('[nodeName=com\\:enddate]').text(end_date);
//设置单位
$(request_xml_doc).find('[nodeName=msg\\:unit]').find('[nodeName=com\\:unit]').text(P8_M80_unit);
var xmlSerializer = new XMLSerializer();
// 把 XMLDOC 转成字符串
var soapMessage = xmlSerializer.serializeToString(request_xml_doc);
}
注意下面这段代码,对于任何ajax请求(包括get,post,load)都将调用下面的函数：
var ajax = $.ajax;
$.ajax=function(opts){
//给每个ajax请求路径追加"ajax"参数
if(opts.url.indexOf("?") >0){
opts.url+='&ajax';
}else{
opts.url+='?ajax';
}
//ajax成功的回调函数
var success=opts.success;
opts.success=function(d){
if(typeof d=='string'){
alert(d);
}else if($.isFunction(success)){
success(d);
}
};
//设置ajax超时时间
opts.timeout=180000;
ajax(opts);
}
jQuery.ajaxSetup([options])
设置全局 AJAX(就是jQuery.ajax()方法，与全局ajax事件无关) 默认选项。例如设置 AJAX 请求默认地址为 "/xmlhttp/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数：
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
*********************
在js文件中使用jQuery的异步时如get,post,ajax方法时，参数url，如果请求url:"portal/ajaxcheck.action"则表示相对于当前项目根路径下的portal下的ajaxcheck.action，而不是相对于当前文件。如果写成url:"/portal/ajaxcheck.action"则请求会出错。
***********************
后台输出"null"字符串，通过getJSON等异步方式得到的是数据在javascript中等于null。
*****************
如果alert服务端返回的字符串为[Object xmlDOcument]则需要在服务端的response中设置:
response.setContentType("text/html");
******************
jQuery.ajaxSetup([options])
设置全局 AJAX 默认选项
例如：设置 AJAX 请求默认地址为 "test.action"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的AJAX请求不再设置任何选项参数将默认请求test.action,并传递数据data: myData。
$.ajaxSetup({
url: "test.action",
global: false,
type: "POST"
});
$.ajax({ data: myData });
在做ajax页面无刷新添加的时候，IE下遭遇Ajax缓存，因为刚开始并不知道IE有这个坏毛病，折腾好久，终于解决问题。总结一下解决办法：
在IE下用Ajax请求某一页面，通常会因为缓存的原因而返回上一次的结果，造成混乱，[即get方式时，获取数据，因发送参数和地址都一致，故IE浏览器会从缓存中取，而不会去请求服务器端，而post方式因为参数的不同，不会产生这个问题]而FF下不会出现这种情况。为了不受缓存影响，可以这样做：
第一种方式：
在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数
在javascript发送的URL后加上t=Math.random()
例如这样:URL+"&"+"t="+Math.random();或者new Date();
第二种方式：
在 URL 参数后加上"?timestamp=" + new Date().getTime();
第三种方式最好的方法：
$.ajaxSetup({cache:false})
***************
jQuery.extend 函数详解
jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型:
jquery的扩展方法原型是:
extend(dest,src1,src2,src3...);
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：
var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。
这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
那么合并后的结果
result={name:"Jerry",age:21,sex:"Boy"}
也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。
省略dest参数
上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：
$.extend(src),该方法就是将src合并到jquery的全局对象中去，如：
$.extend({
hello:function(){alert('hello');}
});
就是将hello方法合并到jquery的全局对象中。
$.fn.extend(src)
该方法将src合并到jquery的实例对象中去，如:
$.fn.extend({
hello:function(){alert('hello');}
});
就是将hello方法合并到jquery的实例对象中。
Jquery的extend方法还有一个重载原型：
extend(boolean,dest,src1,src2,src3...)
第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：
var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );
我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是：
result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}}
也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：
var result=$.extend( false, {},
{ name: "John", location:{city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} }
);
那么合并后的结果就是:
result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}
这是在jquery全局对象中扩展一个net命名空间。
$.extend($.net,{
hello:function(){alert('hello');}
})
**************************
JSONP与跨域
理解同源策略限制
同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从 Netscape Navigator 2.0 版本开始就存在。
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问
Jsonp原理：
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时，服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）
服务端http://crossdomain.com/zhuce.do?test方法
@RequestMapping(value="/zhuce.do",params="test")
public void test(HttpServletRequest request,HttpServletResponse response){
String callback=request.getParameter("callback");
response.setCharacterEncoding("UTF-8");
respone.setContentType("text/html");
PrintWriter out = response.getWriter();
//注意这里要用callback字符串拼接
String jsoncallback=callback+"({'code':'success','info':'测试'})";
out.print(jsoncallback);
}
客户端的调用
$.getJSON实现方式：
$.getJSON("http://crossdomain.com/zhuce.do?test&callback=?",
function(result) {
alert(result.code)//将输出success
});
$.ajax实现方式：
$.ajax({
url:"http://crossdomain.com/zhuce.do?test",
dataType:'jsonp',
data:{},
jsonpCallback:'callback',
success:function(result) {
alert(result.code)//将输出success
}
});
$.get实现方式:
$.get("http://crossdomain.com/zhuce.do?test&callback=?",
function(result) {
alert(result.code)//将输出success
},'jsonp');
其它实现方式：
<script type="text/javascript">
function jsonpCallback(result){
alert(result.code)//将输出success
}
</script>
<script type="text/javascript" src="http://crossdomain.com/zhuce.do?test&callback=jsonpCallback"></script>
*******************************
.load(url,[data],[fn])
该方法载入远程html文件代码并插入至DOM中。默认使用GET方式传递，如果传递附加参数[data]时自动转换为POST方式。
url，待装入的html网页地址。string类型
data,可选，发送至服务器的key/value数据
fn，可选载入成功时回调函数
例如： 函数传递参数data，将以post提交
$("#feeds").load("feeds.jsp", {limit:25,fdd:"test"}, function(){
alert("The last 25 entries in the feed have been loaded");
});
.load函数函数可以请求action或某个servlet，如果servlet跳转到另外一个页面(/theTest.jsp)，那么load函数就会加载跳转到得那个页面到元素中(myload)。
jQuery("#myload").load("${pageContext.request.contextPath}/test/myServlet",{page:"test.jsp"});
下面是该servlet的doPost方法：
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
String page=request.getParameter("page");
RequestDispatcher dispatcher=null;
//跳转到另外一个页面
dispatcher=request.getRequestDispatcher("/theTest.jsp");
dispatcher.forward(request,response);
}
注释只有转发(forward)到指定的页面，该页面可以被load加载进来，如果是通过response.sendRedirect()重定向的页面就不能被load进来。
jQuery.getScript(url[,fn])
通过Http GET请求载入并执行一个javascript文件。返回值是XMLHttpRequest。
url，待载入js文件地址。
fn,成功载入后回调函数。
通过load()函数添加进来的页面如同iframe，可以通过window.parent来获得父窗口对象。
2JSON
JSON是一种轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。和xml一样，JSON也是基于纯文本的数据格式。同时json是javascript原生格式，意味着在javascript中处理json数据不需要任何特殊的API或工具包。
JSON建构于两种结构：”名称/值“对的集合，值的有序列表。
JSON具有以下这些形式：
数组，是值（value）的有序集合，一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。例如:以下数据包含了一个String,Number,Boolean和一个null
["abc",12345,false,null]
json数组的length属性返回该数组中元素的个数。
如果取超出数组长度外的元素的值为null或undefined。
对象，是一个无序的"名称/值"对集合。一个对象以{开始，以}结束。每个名称后跟一个:(冒号)。名称/值对之间使用,(逗号)分隔。其中值也可以是另一个Object或数组。JSON对象没有length属性。
例如：{"name":"Michael","address":{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}}
演示了使用JSON形式定义这个用户列表：
＜script＞
var UserList = [
{"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"},
"Email":"zhuleipro@hotmail.com"},
{"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"},
"Email":"xxx@xxx.com"},
{"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"},
"Email":"xxx2@xxx2.com"}
];
alert(UserList[0].Name.FirstName);
alert(UserList[0]['UserID']);//返回11
alert(UserList[0].UserID);//也返回11建议使用"."符号。
＜/script＞
值，可以是双引号括起来的字符串(string)，数值(number)，Boolean(true,false)，null，对象或数组
字符串String，是由双引号包围的任意数量的Unicode字符的集合。除了字符 "，\，/ 和一些控制符（\b，\f，\n，\r，\t）需要编码外，其他 Unicode 字符可以直接输出。如："abc"
Boolean，表示为true或false。此外javascript中的null被表示为null，注意true，false和null都没有双引号，否则被视为一个String。
在javascript中，json数组中元素的删除操作和javascript数组的操作是一样的。json对象就是javascript对象的删除使用delete语句，如：
var field={"name":"Michael","city":"Beijing","street":" Chaoyang Road ","postcode":100025};
delete field.name;//直接删除源json数据的name。或delete field['name']
json对象的添加和删除属性：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript">
var tt={"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}};
tt.id="111";//向json对象中添加属性
alert(tt.id);
alert(JSON.stringify(tt));
tt.id=undefined; //删除json对象的id属性(用$.each方法还是可以遍历出来)，最好用delete tt.id。
alert(JSON.stringify(tt));
</script>
</head>
<body>
</body>
</html>
也可以这样创建对象：
var test=new Object(); 或var test={};
var organid='id';
test[organid]=1111;//中括号内可以存放变量
test['name']="jackson";
alert(JSON.stringify(test));//将输出{"id":1111,"name":"jackson"}
也可以通过[]取出json对象对应的属性值，如test[organid]和test['id']都将返回1111;
JavaScript处理JSON数据
通过一个简单的JavaScript方法就能看到客户端如何将JSON数据表示给用户：
function handleJson() {
var j={"name":"Michael","address":
{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
};
document.write(j.name);
document.write(j.address.city);
}
}
js中判断对象是否是json对象：
var isjson = typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length;
alert(isjson);
标准的的json格式，要求字符串都使用双引号""来限定。jquery1.4采用标准的json格式。
//由JSON字符串转换为JSON对象，如下所示obj就是json对象了
var str="{'name':'xiaoming','sex':'male'}"
var obj = eval('(' + str + ')');
通过eval操作json对象
var obj={'name':'xiaolin'};
alert(eval('obj').name); //返回'xiaolin'
eval('obj').name='xiaoxiao';
alert(obj.name); //返回'xiaoxiao'
var str="['aa','bb','cc']";
var arrary1=eval(str);//得到str的数组对象。
**********
关于json2.js
javascript中创建json格式的数据对象的是直接将json格式的数据赋给一个var变量。如：
var o = {"name":"tn","code":"tc","children":[{"name":"c1","code":"c1"},{"name":"c2","code":"c2"}]};
这样我们创建了一个json格式的对象o,如果我们想要输出json对象的内容，需要导入json2.js。下载地址：http://www.json.org/js.html
然后将json2.js中的第一句：
alert('IMPORTANT: Remove this line from json2.js before deployment.');
注释掉，不然会出错。
然后使用json2.js中JSON.stringify(json对象);将json对象转换成一个字符串，这样就可输出json对象的内容。如下：
var s = JSON.stringify(o);
alert(s);
json2.js中的JSON.parse(json格式的字符串)转换为json对象。使用JSON.parse()方法时要注意每个属性必须用双引号括起来，否则会抛出异常。例如：
var string1='{"id":30,"name":"wjjjjj"}';
//不能写成"{'id':30,'name':'wjjjjj'}",否则会抛出异常,不能用单引号
JSON.parse(string1);
var kk=JSON.parse(string1);//将被转换为一个json对象
alert(kk.id);//将输出30
var string1='[{"id":30,"name":"wjjjjj"},{"id":60,"name":"dgfej"}]';
var kk=JSON.parse(string1);//将被转换为一个json对象
//遍历json数组
jQuery.each(kk,function(i,jobject){
alert(kk[i].name+" "+kk[i].id+" ");//将输出每个kk中的每个json对象的name属性的值和id属性的值
或者alert(field.name+" "+jobject.id+" ")
})
下面是将一个json格式的数组字符串转换成一个json对象，注意这个数组格式的字符串须用单引号括起来，且其中的数组元素用双引号括起来，数字可以不用引号括起来。
var string1='["fdfdf","dddddd",30]';
var kk=JSON.parse(string1);
jQuery.each(kk,function(i,field){
alert(field);
});
});
JSON.parse(data,function(key, value))，用于将json格式的字符串data转换为json对象，并调用function(key,value)。遍历其中的json对象，key对应每个json对象的key，value对应每个json对象的值。如：
var string1='[{"id":30,"name":"wjjjjj"},{"id":60,"name":"dgfej"}]';
var kk=JSON.parse(string1,function(key,value){
if(key=="name"){
//将输出每个json对象中key="name"对应的value的值,因此将输出wjjjjj和defej。
alert(value);
}
});
***********
3jQuery.getJSON(url,[data],[function])或$.getJSON(url,[data],[function])
该函数的返回值是XMLHttpRequest，通过Http GET请求载入JSON数据。
url(String)，发送请求地址。
data(Map),待发送的Key/value参数。
function,载入成功时回调函数。
通过JSON获得后台json格式的字符串或json对象都是可以获得的。
json格式的数据可以保存到.json的文件中。我们将以下内容(是一个JSON数组)：
[
{"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"},
"Email":"zhuleipro@hotmail.com"},
{"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"},
"Email":"xxx@xxx.com"},
{"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"},
"Email":"xxx2@xxx2.com"}
]
保存到b.json文件中。然后再javascript中通过$.getJSON('b.json')加载b.json。
jQuery.getJSON('b.json');虽然函数调用加载了文件，但是并没有告诉javascript对返回的文件中数据如何处理。为此我们还需要使用回调函数。$.getJSON()函数还需要接收一个参数，这个参数是当加载完成时调用的回调函数function。回调函数function也需要一个参数，该参数中保存着返回的数据。因此我们的代码要写成：jQuery.getJSON('b.json',function(data){...});
现在已经将b.json的数据保存到回调函数的参数data中了，那么就可使用$.each()对数据进行遍历。
jQuery.getJSON('b.json',function(data){
var xmlhttp=$.each(data,function(userIndex,user){
//userIndex参数是代表着数组的索引，user参数代表着索引对应的内容。
alert(userIndex+" "+user.Name.FirstName);
//使用$.each()遍历b.json中Name的内容。
if(user.Name){
$.each(user.Name,function(nameIndex,name){
alert(name);
});
//xmlhttp是一个XMLHttpRequest对象
})；
尽管JSON格式很简洁，但它不容许任何错误，所有方括号，花括号，引号和都好都必须合理而且适当的存在，否则文件不会加载。而且在多数浏览器中，当文件不会加载时我们都看不到错误信息。
当用$.each(data,function(m,n)方法来遍历json格式的字符串data时，如果data是json格式的数组，则m代表数据的索引，n代表索引对应的值。如果data是json格式的对象，则m代表key，n代表value。
当后台输出JSONObject或者JSONArray对象或者是String格式的字符串时，使用getJSON方法都可以得到,但是不能用get方法来得到。如果后台返回单个字符串如"123"，则getJSON也会得到单个字符串"123"。但是如果返回"null"，得到的是null，而不是字符串，进行(返回结果=="null")比较返回false，进行(返回结果==null)返回true。
例如：
jQuery.getJSON("${pageContext.request.contextPath}/admin/updTradeOrder.action",{"tradeInfoVO.parentID":13,"tradeInfoVO.showOrder":5},function(data){
....
}
当我们在后台${pageContext.request.contextPath}/admin/updTradeOrder.action输出一个JSON格式的字符串如：
public void backjson(){
String s="{'id':30,'name':'wjjjjj'}";
try{
//一定要setContentType("text/html");否则我们降到xml格式的字符串。
response.setContentType("text/html");
response.getWriter().println(s);//服务端返回json字符串
}catch(IOException ex){
ex.printStackTrace();
}
}
那么通过$.getJSON请求的回调函数参数data就是一个JSON对象，在回调函数中通过data.id便可得到返回的数据30，通过data.name便得到wjjjjj。
注意如果后台的字符串是拼接成的如：String s="{'succ':'error','info':'"+e.getMessage()+"'}";对于e.getMessage()这种字符串一定要用两个单引号包含，因为返回的字符串必须符合json格式。
4jQuery.get(url,[data],[function(data)])
该函数的返回值是XMLHttpRequest，通过Http GET请求载入信息,这个函数只是简单地取得URL指定的文件，然后将服务端返回的xml,json,html,text格式的信息传递给回调函数function的参数data中。
url(String)，发送请求地址。
data(Map),待发送的Key/value参数。会附加到请求的url中。
function,载入成功时回调函数。(只有当Response的返回状态时successs才调用该方法)
例如：
var xmlhttp=$.get("tt.jsp",{name:"lulu"},function(data){
//参数data就是服务端通过response输出的信息。
alert(data);
});
//xmlhttp是一个XMLHttpRequest对象
我们可以使用jQuery.get()方法来加载XML文件，并对XML文件的内容进行处理。在根据服务器提供的MIME类型知道响应的是XML的情况下，提供给回调函数function的将是DOM树。我们已经领略过了jQuery强大的DOM遍历能力，对XML就如同对Html文档一样，也可以使用常规的.find()，.filter()及其他遍历方法。
下面我们使用jQuery.get()方法来对b.xml进行处理
<?xml version="1.0" encoding="UTF-8"?>
<users>
<user userID="11">
<name FirstName="Truly" LastName="Zhu">
</name>
</user>
<user userID="12">
<name FirstName="Jeffrey" LastName="Richter">
</name>
</user>
<user userID="13">
<name FirstName="Jeffrey" LastName="Richter">
</name>
</user>
</users>
然后再jsp页面中的javascript编写：
jQuery.get('b.xml',function(data){
//从b.xml中查找<user>元素并遍历每个<user>元素的userID属性值。
$(data).find('user').each(function tt(){
alert($(this).attr('userID'));
});
});
jQuery.post(url,[data],[function(data)])
同上面的get方法一样，该函数的返回值是XMLHttpRequest，通过Http POST请求载入信息。
var xmlhttp=$.post("./getCode.do",{checkcode:"y"},function(data){
alert(data);
}
//xmlhttp是一个XMLHttpRequest对象
5序列化表单.serialize()方法
这个方法作用域jQuery对象，将匹配的DOM元素转换成能够随AJAX请求传递的查询字符串。一般用于<form>表单，将<form>中的数据，转换成传递的字符串。例如：
例如：
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2"
checked="checked"/> check2
<input type="radio" name="radio" value="radio1"
checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>
alert($("form").serialize());将输出：
那么$("form").serialize()结果是：single=Single&multiple=Multiple&multiple=Multple3&check=check2&radio=radio1
=号左边是元素名称右边事元素值。注意如果元素没有name属性则元素将不会转换到.serialize()方法的结果中；如果元素是disabled也不会转换到.serialize()方法的结果中,元素(checkbox,radio)没有选中不会转换到.serialize()；.serializeArray也是这样进行转换。
例如：
jQuery.post("${ctx}/manage/product/addProductType?"+$("form").serialize(),{},function(data){
closewin();
});
serialize中文乱码：
解决方法：调用decodeURIComponent(XXX,true);将数据解码
例如：
var params = jQuery("#formId").serialize(); // http request parameters.
params = decodeURIComponent(params,true);
有时候使用serialize中文乱码，但是使用serializeArray不一定中文乱码。
.serializeArray()方法
序列化表格元素 (类似 '.serialize()' 方法) 返回JSON数据结构数据对象,是一个JSON数组。
var fields = $("form").serializeArray();
//使用JQuery.each()方法输出fields对象中的每个json对象的key为name和id的值
jQuery.each( fields, function(i, field){
$("#results").append(field.name+" "+field.id+" ");
fields是一个json对象，如果想输出它的内容。需要使用json2.js中JSON.stringify(fields);方法将fileds转换成字符串来查看其内容。如：
var s = JSON.stringify(fields);
alert(s);//将输出以下内容：
[{"name":"single","value":"Single"},{"name","mutiple","value","Multiple"},{"name","mutiple","value","Multiple3"},{"name":"check","value":"check2"},{"name":"radio","value":"radio1"}]
serialize与serializeArray()都是将元素的name属性作为key，我自定义jquery函数,返回json对象的表单元素:
jQuery.fn.objParam=function(){
var data={};
var fields =this.serializeArray();
jQuery.each( fields, function(i, field){
var key=field.name;
var keyvalue=$.trim(field.value);
if(keyvalue!=""){
data[key]=keyvalue;
}
});
return data;
};
jQuery.param(obj, [traditional])
返回值:String，将json数组或者对象序列化。是.serialize()的核心方法。
objArray<Elements>, jQuery, Object数组或jQuery对象会按照name/value对进行序列化，普通对象按照key/value对进行序列化。
traditional (可选)Boolean是否使用传统的方式浅层序列化。默认为false。
var params = { width:1680, height:1050 };
var str = jQuery.param(params);
$("#results").text(str);//结果:width=1680&height=1050
对比两种traditional序列化方式:
var myObject = {
a: {
one: 1,
two: 2,
three: 3
},
b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);//深层次序列化
var recursiveDecoded = decodeURIComponent($.param(myObject));
alert(recursiveEncoded);
alert(recursiveDecoded);
//a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
//a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3
var shallowEncoded = $.param(myObject, true);//浅层次序列化
var shallowDecoded = decodeURIComponent(shallowEncoded);
alert(shallowEncoded);
alert(shallowDecoded);[]D&b=1&b=2&b=3
//a=[object+Object]&b=1&b=2&b=3
//对于中文$.param使用encodeURIComponent进行了编码
var data={userId:12,name:'张三',englishN:'zhangsan'}
alert($.param(data))
userId=12&name=%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD&englishN=zhangsan
例如使用$.param将数组传递到后台：
var data={};
data.items=[1,2,3];
$.ajax({
type: "post",
url: "test.do",
dataType: "JSON",
data: $.param(data.items)
});
后台使用String[] items=request.getParameterValues("items")得到传递过来的数组。
6 ajax事件
Ajax请求会产生若干不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件：局部事件 和 全局事件。局部事件就是在每次的Ajax请求时在方法内定义的，例如：
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});
全局事件是每次的Ajax请求都会触发的全局事件可以如下定义：
$("#loading").bind("ajaxSend", function(){
$(this).show();
}).bind("ajaxComplete", function(){
$(this).hide();
});
或者：
$("#loading").ajaxStart(function(){
$(this).show();
});
.ajaxStop(function)
Ajax事件，Ajax请求结束时执行函数function。返回一个jQuery对象。
.ajaxStart与.ajaxStop可以把它们添加给任何JQuery对象，无论它们的代码位于何处，当Ajax通信发生时都需要调用它们。
$(document).ready(function (){
$('#d2').ajaxStart(function(){
//this代表的是$("#d2")的dom对象
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
});
ajaxStart(callback)，AJAX 请求开始时执行函数。Ajax 事件。
ajaxSend(callback)，AJAX 请求发送前执行函数。Ajax 事件。
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("<li>开始请求: " + settings.url + "</li>");
});
ajaxSuccess(callback)，AJAX 请求成功时执行函数。Ajax 事件。
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("<li>请求成功!</li>");
});
ajaxComplete(callback)，AJAX 请求完成时执行函数。Ajax 事件。
$("#msg").ajaxComplete(function(event,request, settings){
$(this).append("<li>请求完成.</li>");
});
ajaxStop(callback)，AJAX 请求结束时执行函数。Ajax 事件。
$("#loading").ajaxStop(function(){
$(this).hide();
});
我们可以在特定的请求将全局事件禁用，只要设置下 global 选项就可以了：
$.ajax({
url: "test.html",
global: false,// 禁用全局Ajax事件.
// ...
});
.ajaxError(function)
Ajax事件，Ajax请求发生错误时执行函数function。返回一个jQuery对象
function (event, XMLHttpRequest, ajaxOptions, thrownError) {
// thrownError 只有当异常发生时才会被传递
this; // 监听的 dom 元素
}
ajax事件的顺序如下：
ajaxStart 全局事件
开始新的Ajax请求，并且此时没有其他ajax请求正在进行。.ajaxStart(function())
beforeSend 局部事件
当一个Ajax请求开始时触发。如果需要，你可以在这里设置XHR对象。
ajaxSend 全局事件
请求开始前触发的全局事件，.ajaxSend([function(event,xhr,options)])
success 局部事件
请求成功时触发。即服务器没有返回错误，返回的数据也没有错误。
ajaxSuccess 全局事件
全局的请求成功。.ajaxSuccess(function(event,xhr,options))
event - 包含 event 对象
xhr - 包含 XMLHttpRequest 对象
options - 包含 AJAX 请求中使用的选项
error 局部事件
仅当发生错误时触发。你无法同时执行success和error两个回调函数。
ajaxError 全局事件
全局的发生错误时触发.ajaxError(function(event,xhr,options,exc))
event - 包含 event 对象
xhr - 包含 XMLHttpRequest 对象
options - 包含 AJAX 请求中使用的选项
exc - 包含 JavaScript exception
complete 局部事件
不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件。
ajaxComplete 全局事件
全局的请求完成时触发，ajaxComplete(function(event,xhr,options))
ajaxStop 全局事件
当没有Ajax正在进行中的时候，触发。.ajaxStop(function())
局部事件回调的参数在文档中写的很清楚了，这里就不累述了。
全局事件中，除了ajaxStart和ajaxStop之外，其他的事件都有3个参数
event, XMLHttpRequest, ajaxOptions
第一个是事件，第二个是XHR对象，第三个参数最有用，是当时调用这个ajax的时候的参数。
对于ajaxError,还有第四个参数thrownError，只有当异常发生时才会被传递。
如果在将全局ajax卸载js文件中，加载执行则可以这样写,要使用$(document)，如果换成$("body")等其他元素则全局事件无效：
$(document).ajaxSend(function(evt,request,setting){
alert(setting.url);
});
例如ajaxSuccess：
$(document).ajaxSuccess(function(evt,request,setting){
var responseText=request.responseText;
//如果发现用户超时就提示用户登录并ajax中断请求
if(responseText=='timeoutError'){
//提示登录
top.openLogin(null, null);
request.Abort();//中断ajax请求。避免后面的ajax事件方法继续执行
}
});
7动态加载javascript文件
根据请求注入<script>标签，由于jQuery能帮我们插入新的DOM元素，因此向文档注入<script>标签非常简单。
$(document.createElement('script')).attr('src','http://eample.com.example.js').appendTo('head');
8JQuery.ajax(options)
通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。
$.ajax() 只有一个参数options,它是key/value的形式。options的内容,它的所有选项都是可选的：我们也可以自己添加一些key/vlaue，然后再complete,success对应的函数中通过this.key来取得key对应的vlaue。
async (Boolean) : (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(jqXHR, settings)(Function) : 发送请求前可修改XMLHttpRequest对象的函数，如添加自定义HTTP头。XMLHttpRequest对象是唯一的参数。返回的false将取消该请求。第二个参数是当时调用这个ajax的时候的参数。例如：
function (XMLHttpRequest,settings) {
alert(settings.url);//表示本次ajax请求的url
this; // 调用本次AJAX请求时传递的options参数
}
cache (Boolean) : (默认: true,dataType为script时默认为false) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete(jqXHR, textStatus)(Function) : 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串。
function (XMLHttpRequest, textStatus) {
this; // 调用本次AJAX请求时传递的options参数
}
success (Function) : 请求成功后回调函数。参数：服务器返回数据，数据格式。
function (data, textStatus) {
// data 可能是 xmlDoc, jsonObj, html, text, 等等...
this; // 调用本次AJAX请求时传递的options参数
}
contentType (String) : (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataFilter (Function) ：给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function (data, type) {
// 对Ajax返回的原始数据进行预处理
return data // 返回处理后的数据
}
dataType (String) : 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串
error (Function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数：XMLHttpRequest 对象、错误信息、（可选）捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常 textStatus 和 errorThrown 之中
// 只有一个会包含信息
this; // 调用本次AJAX请求时传递的options参数
}
username (String) : 用于响应HTTP访问认证请求的用户名
password (String) : 用于响应HTTP访问认证请求的密码
type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
url (String) : (默认: 当前页地址) 发送请求的地址。
jsonp (String)：在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
jsonpCallback (String)：为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。
scriptCharset (String)：只有当请求时dataType为"jsonp"或"script"，并且type是"GET"才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。
processData (Boolean) : (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
timeout (Number) : 设置请求超时时间（毫秒）。此设置将覆盖全局设置。
global(Boolean):是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
例如：加载并执行一个 JS 文件。
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
例如：保存数据到服务器，成功时显示信息。
$.ajax({
type: "POST",
url: "some.action",
data: "name=John&location=Boston",
test: "00",//自己添加的一个key/value
success: function(msg){
alert( "Data Saved: " + msg );
alert(this.test);//将输出00。
}
});
例如：同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
$.ajax({
url: "some.php",
async: false
data: "name=John&location=Boston",//或data:{"name":"John","location":"Bostom"}
success: function(msg){
alert( "Data Saved: " + msg );
}
});
例如：
function loadGravidaBloodPressureMessage() {
$.ajax({
url: "P8_M80_request.xml",
type: "POST",
async: true, // ajax 异步方式执行
dataType: "xml",
test:"ttt",
complete: loadGravidaBloodPressureData, // 读取数据成功后执行
contentType: "text/xml; charset=utf-8"
});
return false;
}
function loadGravidaBloodPressureData(xmlHttpRequest, status)
{
alert(this.test);//结果为"ttt"
var request_xml_doc = xmlHttpRequest.responseXML;
// 设置会员ID
$(request_xml_doc).find('[nodeName=msg\\:member]').find('[nodeName=id]').text(member_id);
//设置起始日期和结束日期
$(request_xml_doc).find('[nodeName=msg\\:datefilter]').find('[nodeName=com\\:begindate]').text(begin_date);
$(request_xml_doc).find('[nodeName=msg\\:datefilter]').find('[nodeName=com\\:enddate]').text(end_date);
//设置单位
$(request_xml_doc).find('[nodeName=msg\\:unit]').find('[nodeName=com\\:unit]').text(P8_M80_unit);
var xmlSerializer = new XMLSerializer();
// 把 XMLDOC 转成字符串
var soapMessage = xmlSerializer.serializeToString(request_xml_doc);
}
注意下面这段代码,对于任何ajax请求(包括get,post,load)都将调用下面的函数：
var ajax = $.ajax;
$.ajax=function(opts){
//给每个ajax请求路径追加"ajax"参数
if(opts.url.indexOf("?") >0){
opts.url+='&ajax';
}else{
opts.url+='?ajax';
}
//ajax成功的回调函数
var success=opts.success;
opts.success=function(d){
if(typeof d=='string'){
alert(d);
}else if($.isFunction(success)){
success(d);
}
};
//设置ajax超时时间
opts.timeout=180000;
ajax(opts);
}
jQuery.ajaxSetup([options])
设置全局 AJAX(就是jQuery.ajax()方法，与全局ajax事件无关) 默认选项。例如设置 AJAX 请求默认地址为 "/xmlhttp/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数：
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
*********************
在js文件中使用jQuery的异步时如get,post,ajax方法时，参数url，如果请求url:"portal/ajaxcheck.action"则表示相对于当前项目根路径下的portal下的ajaxcheck.action，而不是相对于当前文件。如果写成url:"/portal/ajaxcheck.action"则请求会出错。
***********************
后台输出"null"字符串，通过getJSON等异步方式得到的是数据在javascript中等于null。
*****************
如果alert服务端返回的字符串为[Object xmlDOcument]则需要在服务端的response中设置:
response.setContentType("text/html");
******************
jQuery.ajaxSetup([options])
设置全局 AJAX 默认选项
例如：设置 AJAX 请求默认地址为 "test.action"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的AJAX请求不再设置任何选项参数将默认请求test.action,并传递数据data: myData。
$.ajaxSetup({
url: "test.action",
global: false,
type: "POST"
});
$.ajax({ data: myData });
在做ajax页面无刷新添加的时候，IE下遭遇Ajax缓存，因为刚开始并不知道IE有这个坏毛病，折腾好久，终于解决问题。总结一下解决办法：
在IE下用Ajax请求某一页面，通常会因为缓存的原因而返回上一次的结果，造成混乱，[即get方式时，获取数据，因发送参数和地址都一致，故IE浏览器会从缓存中取，而不会去请求服务器端，而post方式因为参数的不同，不会产生这个问题]而FF下不会出现这种情况。为了不受缓存影响，可以这样做：
第一种方式：
在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数
在javascript发送的URL后加上t=Math.random()
例如这样:URL+"&"+"t="+Math.random();或者new Date();
第二种方式：
在 URL 参数后加上"?timestamp=" + new Date().getTime();
第三种方式最好的方法：
$.ajaxSetup({cache:false})
***************
jQuery.extend 函数详解
jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型:
jquery的扩展方法原型是:
extend(dest,src1,src2,src3...);
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：
var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。
这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
那么合并后的结果
result={name:"Jerry",age:21,sex:"Boy"}
也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。
省略dest参数
上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：
$.extend(src),该方法就是将src合并到jquery的全局对象中去，如：
$.extend({
hello:function(){alert('hello');}
});
就是将hello方法合并到jquery的全局对象中。
$.fn.extend(src)
该方法将src合并到jquery的实例对象中去，如:
$.fn.extend({
hello:function(){alert('hello');}
});
就是将hello方法合并到jquery的实例对象中。
Jquery的extend方法还有一个重载原型：
extend(boolean,dest,src1,src2,src3...)
第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：
var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );
我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是：
result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}}
也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：
var result=$.extend( false, {},
{ name: "John", location:{city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} }
);
那么合并后的结果就是:
result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}
这是在jquery全局对象中扩展一个net命名空间。
$.extend($.net,{
hello:function(){alert('hello');}
})
**************************
JSONP与跨域
理解同源策略限制
同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从 Netscape Navigator 2.0 版本开始就存在。
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问
Jsonp原理：
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时，服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）
服务端http://crossdomain.com/zhuce.do?test方法
@RequestMapping(value="/zhuce.do",params="test")
public void test(HttpServletRequest request,HttpServletResponse response){
String callback=request.getParameter("callback");
response.setCharacterEncoding("UTF-8");
respone.setContentType("text/html");
PrintWriter out = response.getWriter();
//注意这里要用callback字符串拼接
String jsoncallback=callback+"({'code':'success','info':'测试'})";
out.print(jsoncallback);
}
客户端的调用
$.getJSON实现方式：
$.getJSON("http://crossdomain.com/zhuce.do?test&callback=?",
function(result) {
alert(result.code)//将输出success
});
$.ajax实现方式：
$.ajax({
url:"http://crossdomain.com/zhuce.do?test",
dataType:'jsonp',
data:{},
jsonpCallback:'callback',
success:function(result) {
alert(result.code)//将输出success
}
});
$.get实现方式:
$.get("http://crossdomain.com/zhuce.do?test&callback=?",
function(result) {
alert(result.code)//将输出success
},'jsonp');
其它实现方式：
<script type="text/javascript">
function jsonpCallback(result){
alert(result.code)//将输出success
}
</script>
<script type="text/javascript" src="http://crossdomain.com/zhuce.do?test&callback=jsonpCallback"></script>
*******************************
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
