Ajax
Asynchronsousjavascript andxml（异步Javascript和XML）。
Ajax 是一种无需重新加载整个页面的情况下，更新局部页面的技术。
不是指一种单一的技术，是利用了一系列技术：Javascript +xmlhttpRequest +CSS+ 服务器端的集合。
http请求
get请求
主要用于获取数据，因为在url中连接参数，并且容量很低，相对来讲不安全。
post请求
主要用于上传数据，因为会封装在请求报文中，安全性一般，容量几乎无限。
Javascript Ajax
首先查看一下在Javascript中如何使用Ajax请求
<inputtype="button"value="读取txt"id="btn"/>
<script type="text/javascript">varbtn = document.getElementById("btn");
btn.onclick=function() {//1、创建Ajax对象varxhr =null;if(window.XMLHttPRequest) {
xhr=newXMLHttpRequest();//ie6以上、frefox 等}else{
xhr=newActiveXObject('Microsoft.XMLHTTP');//ie6}//2、连接服务器xhr.open("get", "price.txt?time=" + Date.parse(newDate()),true);//get请求，url地址，是否异步//使用get请求时，要加一个时间戳来让每次请求都不一样，否则当目标页面发生变化时，浏览器会缓存xhr.setRequestHeader("If-Modified-Since", "0");//或者不使用时间戳 设置请求头为不缓存//3、发送请求xhr.send(null);//为了兼容写上null/*post方式
xhr.open("post", "price.txt", true); //post
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //添加HTTP请求头
xhr.send("name=bai&last=wei"); //发送数据到服务器*///4、接收返回值//异步使用XMLHttpRequest对象时，必须使用onreadystatechange事件，并检查readyState属性，看是否完成请求xhr.onreadystatechange =function() {//当readyState 改变时就会触发onreadystatechange 事件//readyState共有4个状态：0（未初始化），1（正在载入），2（载入完成），3（开始解析），4（请求完成）。//status代表请求结果，返回http状态码，如：200 代表成功， 404 找不到页面if(xhr.readyState == 4 && xhr.status == 200) {
document.write(xhr.responseText);//服务器相应并非XML时 使用responseText属性。document.write(xhr.responseXML); //服务器相应为XML时 而且需要XML对象进行解析 使用responseXML属性。 return false;}
}
}</script>
XMLHttpRequest常用方法
abort() 取消请求
setRequestHeader() 设置请求头
getAllResponseHeaders() 获取http响应头整个列表
getResponseHeader('key') 获取指定http相应头
注意事项
Ajax只能向同一个域名中的相同端口号、相同协议的url发起请求，不可以跨域，否则会引发错误。
为了浏览器兼容 get请求send最后传递null参数。
get请求时 最好使用encodeURIComonent()进行编码，否则某些浏览器下无法获取值。
解析Json格式时 eval("("+json+")")，但有安全性问题。
Jquery Ajax
使用原始Ajax, 我们需要做较多的事情, 比如创建XmlHttpRequest对象, 判断请求状态, 编写回调函数等.
Jquery提供了几个用于发送Ajax请求的函数，包括load、get、getJSON、post、Ajax。其中Ajax是核心方法，其他方法只是他的一个简化调用。
一、load(url,[data],[callback])
load()方法可以将远程的一个页面加载到当前DOM中。
默认使用get方式，如果传递了data参数则使用post方式。
可以使用选择器选择将部分内容载入。
<divid="container"></div><inputtype="button"value="loadGet"id="loadGet"/><inputtype="button"value="loadPost"id="loadPost"/><inputtype="button"value="loadCallBack"id="loadCallBack"/><inputtype="button"value="loadFiltHtml"id="loadFiltHtml"/>
添加点击事件
$(function(){//get方式请求 注意时间戳 否则浏览器缓存$("#loadGet").click(function(){
$("#container").load("abc.aspx?time=" + Date.parse(newDate()));
});//post方式请求$("#loadPost").click(function(){
$("#container").load("abc.aspx",{
id:12,
name:'david'});
});//发送post请求，并调用回调函数$("#loadCallBack").click(function(){
$("#container").load("abc.aspx",{
id:12,
name:"david"},function(responseText,textStatus,XMLHttpRequest){//responseText 返回的字符串//textStatus 请求状态//XMLHttpRequest 对象alert(responseText + "," + textStatus + "," +XMLHttpRequest);
});
});//发送get请求，只获取id为targetContent的内容$("#loadFiltHtml").click(function(){
$("#container").load("abc.aspx?time=" + Date.parse(newDate()) + " #targetContent")
});
});
注意 load不可以跨域 如load("http://www.baidu.com/") 报错。
二、$.get(url,[data],[callback],[type])
get()方法的参数可以在路径中拼接
$.get("abc.aspx?id=1&name=3&time=" + Date.parse(newDate()))
也可以在参数中指定，两种效果相同。
$.get("abc.aspx",{id:1,name:"3"});
type参数用于设置返回的数据类型，可以是xml，html（默认），script，json，jsonp，text
$("#btn").click(function(){
$.get("abc.aspx",{id:1,name:"3"},function(data,textStatus){
alert(data+ "," + textStatus);//data返回的数据,textStatus状态码},"html");
});
三、$.getJSON(url,[data],[callback])
通过HTTP GET请求 载入 JSON 数据，等同于$.get(url,[data],[callbak],"json")。
什么是JSON呢？
JSON是一个标准，就像XML一样，JSON规定了对象以什么样的格式保存为一个字符串，将复杂对象序列化为一个字符串，在浏览器端再将字符串反序列化为javascript可以读取到对象。
数据使用键值对存储 "key":"value"，使用逗号分割 "key1":"value1","key2":"value2"。使用花括号保存对象 lala:{"name":"value","name":123}
在C#中使用JSON
C#将.NET对象序列化为Javascript字符串的方法：JavaScriptSerializer().Serialize(p)，JavaScriptSerializer在System.Web.Extensions.dll中，是3.0新增的类。
建立一个hanlder文件。
publicvoidProcessRequest(HttpContext context)
{
context.Response.ContentType="text/plain";
List<value> lists =newList<value>();
lists.Add(newvalue(1,"嘉文",18));
lists.Add(newvalue(2,"盖伦",28));
lists.Add(newvalue(3,"赵信",38));
System.Web.Script.Serialization.JavaScriptSerializer js=newSystem.Web.Script.Serialization.JavaScriptSerializer();varjsonData =js.Serialize(lists);
context.Response.Write(jsonData);
}publicclassvalue
{publicvalue(intid,stringname,intage)
{this.id =id;this.name =name;this.age =age;
}publicintid {get;set; }publicstringname {get;set; }publicintage {get;set; }
}
在页面上异步获取JSON
<buttontype="button"class="btn btn-primary"id="getJSON">getJSON</button>
<script>$("#getJSON").click(function() {
$.getJSON("Handler1.ashx?r=" + Math.random(),function(data, textStatus) {varjson = eval(data);//使用eval解析JSONfor(vari = 0; i < json.length; i++) {
console.log(json[i].name);
}
});
});</script>
浏览器返回数据如下：
[{"id":1,"name":"嘉文","age":18},{"id":2,"name":"盖伦","age":28},{"id":3,"name":"赵信","age":38}]
四、$.getScript(url,[callbak])
通过 HTTP GET 请求载入并执行一个 JavaScript 文件，相当于 $.get(url, null, [callback], "script")
<buttontype="button"class="btn btn-primary"id="getScript">getScript</button><buttontype="button"class="btn btn-primary"id="getScriptCross">跨域调用</button><scripttype="text/javascript">//调用同站点内的js文件$("#getScript").click(function() {
$.getScript("bootstrap3.34/js/bootstrap.js",function(data, textStatus) {
alert(this.url);//返回调用路径});
});//跨域调用js文件$("#getScriptCross").click(function() {
$.getScript("http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js",function(data, textStatus) {
alert(this.url);//返回调用路径});
});</script>
五、$.post(url,[data],[callback],[type])
通过远程 HTTP POST 请求载入信息，具体操作和get()请求一样，只是换了个$.post。
六、$.ajax( options )
ajax方法是Jquery Ajax 的底层实现，返回其创建的XMLHttpRequest对象，该方法只有一个参数 key/value 对象。
<buttontype="button"class="btn btn-primary"id="Ajax">Ajax</button><script>$("#Ajax").click(function() {
$.ajax({
url:"Handler1.ashx",
type:"get",//默认gettimeout:"1000",//超时时间毫秒async:true,//默认true异步beforeSend:function() {//发送请求前执行alert("发送请求前执行！");
},
cache:false,//不缓存complete:function(responseText, textStatus) {//请求成功或失败均调用，可以进行一些判断alert(responseText);
},
contentType:"application/x-www-form-urlencoded",//application/x-www-form-urlencoded 默认这个报文头 表单data: { id:1, name:"嘉文"},
dataType:"html",//返回类型error:function(e) {
alert(e);//返回错误信息},
global:true,//默认true 是否触发全局AJAX事件success:function(data, textStatus) {//请求成功后的回调alert(textStatus);
alert(data);
}
})
});</script>
七、AJAX相关函数
1、$.ajaxSetup( options )
设置全局AJAX默认 options 选项。
ajax方法的所有属性都可以在此进行设置，设置完毕后，就可以进行调用无参的get()、post()等方法发送请求。
如果在调用时，指定了某些属性，将优先使用该属性，不会冲突。
$.ajaxSetup({
url:"index1.html",
global:false,
type:"post",
success:function(data) {
alert(data);
}
});
$("#test").click(function(){
$.post();//会发送到index1.html
});
$("#btn").click(function() {
$.get("index3.html");//使用自定义的url 其他用默认的});
2、serializer()
有些时候，我们需要异步提交表单，这是需要自己手动输入所有参数，使用serializer()方法可以自动将表单上的元素进行拼接，返回一个参数字符串。
html代码
<formclass="form-horizontal"role="form"style="margin-top:100px;"id="form1"><divclass="form-group"><labelclass="col-lg-2 control-label">用户名：</label><divclass="col-lg-8"><inputtype="text"name="userName"placeholder="请输入用户名"class="form-control"/></div></div><divclass="form-group"><labelclass="col-lg-2 control-label">密码：</label><divclass="col-lg-8"><inputtype="passWord"name="passWord"placeholder="请输入密码"class="form-control"/></div></div><divclass="form-group"><divclass="col-lg-offset-2 col-lg-8"><buttontype="button"class="btn btn-default"id="login">登陆</button></div></div></form>
以前你要这么做
$("#login").click(function() {
$.post("login.ashx", { userName: $("input[name='userName'").val(), passWord: $("input[name='passWord'").val() },function() {//location.href='index.html';});
});
使用方法
$("#login").click(function() {
$.post("login.ashx", $("#form1").serialize(),function() {//location.href='index.html';});
});
自动拼接的参数：userName=123123&passWord=123
3、serializeArray()
该方法返回JSON对象。
$("#login").click(function() {varobjs = $("#form1").serializeArray();varstr = JSON.stringify(objs);//将json转换为字符串document.write(str);
});
运行结果
[{"name":"userName","value":"123123"},{"name":"passWord","value":"asd"}]
八、JSONP
JSON with Padding是json的一种使用模式，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
注意 url?jsoncallback=? Jquery会自动将？编译为正确的函数名来执行回调函数。
$("#btn").click(function() {
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?",function(data) {for(vari = 0; i < data.length; i++) {
alert(data[i]);
}
});
});
对应的$.ajax方法查询手机归属地
<p>请输入手机号<inputtype="text"id="tel"/></p><p>归属地：<spanid="province"></span></p><p>运营商：<spanid="Operators"></span></p><buttontype="button"id="btn">查询</button>
<script>$("#btn").click(function() {
$("#province").html("");
$("#operators").html("");vartel = $("#tel").val();
$.ajax({
type:"get",
url:"http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=" +tel,
dataType:"jsonp",
jsonp:"callback",
success:function(data) {
$("#province").html(data.province);
$("#operators").html(data.catName);
},
error:function(e) {
alert(e);
}
});
});</script>