AJAX 是Asynchronous JavaScript and XML 异步的JavaScript 和 XML. 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，使网页实现异步更新。

工作原理

ajax

实例

1
2
3
4
5
6
7
<button type="submit" onclick="loadXMLDoc()">change </button>
<script>
function loadXMLDoc()
{
  AJAX 执行
}
</script>

创建XMLHttpRequest 对象

XMLHttpRequest 是Ajax的基础

1
2
3
4
5
6
7
8
9
10
11
var xmlhttp; 
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求

XMLHttpRequest 对象用于和服务器交换数据

如需将请求发送到服务器，使用XMLHttpRequest对象的open() 和 send() 方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
//open(method,url,async) method 是请求的类型，url 是文件在服务器上的位置 async true为异步，false 是同步。
//send(string)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST","/try/ajax/demo_post.php",true);
  xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
 
</body>
</html>

jQuery Ajax

jQuery在全局对象jQuery(也就是$)绑定了ajax()函数,可以处理AJAX请求, ajax(url, settings)函数需要接收一个URL和一个可选的settings对象.常用选项如下:

  • async：是否异步执行AJAX请求，默认为true，千万不要指定为false；
  • method：发送的Method，缺省为'GET'，可指定为'POST'、'PUT'等；
  • contentType：发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为text/plain、application/json；
  • data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；
  • headers：发送的额外的HTTP头，必须是一个object；
  • dataType：接收的数据格式，可以指定为'html'、'xml'、'json'、'text'等，缺省情况下根据响应的Content-Type猜测。

下面的例子发送一个GET请求,并返回一个JSON格式的数据

1
2
3
var jqxhr = $.ajax('/wkn',{
    dataType:'json'
});
jQuery load() 是强大的AJAX方法,

load()方法从服务器加载数据,并把返回的数据放入被选元素中.

1
$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

get()

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

post()

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法:

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

getJSON

$(selector).getJSON(url,data,success(data,status,xhr))

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("demo_ajax_json.js",function(result){
            $.each(result, function(i, field){
                $("div").append(field + " ");
            });
        });
    });
});