目录
1. 原生 AJAX
2. JQuery AJAX
AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）
局部更新网页，无需重新加载整个网页
1. AJAX原生使用
var xmlhttp;
if (window.XMLHttpRequest){
// 大多数浏览器 code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// 旧版本IE code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest 对象:AJAX 的基础,所有现代浏览器均支持。
onreadystatechange
/* readyState状态改变后就会调用
readyState
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
xmlhttp.onreadystatechange=function(){
/*
收到响应后的处理方法：
状态文本
xmlhttp.statusText
请求成功是否状态值(200，404)
xmlhttp.status
所有响应头
xmlhttp.getAllResponseHeaders()
指定的响应头
xmlhttp.getResponseHeader('Last-Modified')
状态值
xmlhttp.readyState 见上
*/
if (xmlhttp.readyState==4 && xmlhttp.status==200){
// 以字符串形式获取
xmlhttp.responseText;
// 以xml形式获取
xmlhttp.responseXML;
}else if(xmlhttp.status==404){ // 路径错误
}
}
GET
简单也更快
// 设置（请求方式，请求路径，是否异步：绝大多数情况下：true）,并发送请求
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
POST
// 可向服务器发送大量数据（POST 没有数据量限制）
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
2. JQuery AJAX
ajax (请求数据（最底层），默认：get方式)
$.ajax({
url:"https://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
dataType:"text",
success: function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText);
ajaxSetup （设置Ajax请求的公共 参数、函数回调）
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值
$.ajaxSetup({
dataType:"text",
success:function(data){
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
// 将不再需要设置dataType为text、success方法
$.ajax({
data: { num: $("#txtNumber").val() },
url: "https://www.imooc.com/data/check.php"
}); // 请求成功后会调用上面的success方法
$.ajax({
data: { num: $("#txtNumber").val() },
url: "https://www.imooc.com/data/check.php"
});
serialize （序列化表单元素值，生成标准URL编码文本字符串）
$("form").serialize()
将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求
生成数据格式：name=cx&sexSelect=0&LoveCheckbox=on
$("form").serializeArray();
var params = { width:1900, height:1200 };
var str = jQuery.param(params);
width=1900&height=1200
各种回调方法
开始请求前调用
$("#txt").ajaxSend(function(e,xhr,opt){
$(this).html("Requesting " + opt.url);
});
开始请求时调用
$("#txt").ajaxStart(function(){
});
请求stop后调用
$("#txt").ajaxStop(function(){
});
请求完成后调用
$("#txt").ajaxComplete(function(){
});
请求出错时调用
$("#txt").ajaxError(function(){
});
请求成功后调用
$("#txt").ajaxSuccess(function(){
});
例：
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.ajax({
url: "https://www.imooc.com/data/info_f.php",
dataType: "json",
success: function (data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫：" + data.name + "</li>");
}
});
})
$("#divload").ajaxStart(function(){
$(this).html("正在请求数据...");
});
$("#divload").ajaxStop(function(){
$(this).html("数据请求完成！");
});
});
</script>
避免和其他三方库冲突
重命名$为cx
var cx = $.noConflict();
cx(document).ready(function(){
cx("button").click(function(){
cx("p").text("hello");
});
});
load（请求服务器数据（html内容），并把返回的数据显示到指定的元素中）
$(selector).load(url,[data],[callback])
参数：url，请求参数，获取数据后的回调（异步）
例：
// 将获取到的结果加载到ul中，替换掉img，请求失败时为img
$("ul").html("<img src='Images/Loading.gif' alt=''/>")
.load("https://www.imooc.com/data/fruit_part.html",function(){
});
$("#div1").load("https://www.baidu.com",function(responseTxt,statusTxt,xhr){
// responseTxt，状态，XMLHttpRequest对象
$(this).attr("disabled","true");
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
getJSON (请求 JSON格式数据)
jQuery.getJSON(url,[data],[callback])
$.getJSON(url,[data],[callback])
例：
$.getJSON("demo_ajax_json.js",function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
getScript (请求并执行 js脚本文件)
jQuery.getScript(url,[callback])
$.getScript(url,[callback])
例：
$.getScript("https://www.imooc.com/data/sport_f.js",function(){
});
get（请求数据GET方式）
$.get(url,[callback])
例：
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
post （请求数据POST方式）
请求数据
$.post(url,[data],[callback])
例：（地址，参数，获得结果后）
$.post("demo_test_post.asp",{
name:"Donald Duck",
city:"Duckburg"
},function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
