Ajax的应用
Ajax即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。这种异步交互的方式，使用户单击后，不必刷新页面也能获取新数据。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
一、XMLHttpRequest对象
Ajax的核心是XMLHttpRequest对象。该对象为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
创建XMLHttpRequest对象的方法：
variable=new XMLHttpRequest();
主要方法：
1. void open(String method,String url,Boolen async)
用于创建请求
参数：
method： 请求方式：POST或GET
url： 要请求的地址
async： 是否异步（布尔类型）
//如果XMLHttpRequest对象用于AJAX，async参数必须设置为true
2. void send(String body)
用于发送请求
参数：
body： 要发送的数据
3. void setRequestHeader(String header,String value)
用于设置请求头
参数：
header： 请求头的key
vlaue： 请求头的value
4. String getAllResponseHeaders()
获取所有响应头
返回值：
响应头数据
5. String getResponseHeader(String header)
获取响应头中指定header的值
参数：
header： 响应头的key
返回值：
响应头中指定的header对应的值
6. void abort()
终止请求
二、GET请求与POST请求
相比于POST，GET更简单更快，适用于大部分情况。
需要使用POST请求的情况：
①无法使用缓存文件（更新服务器上的文件或数据库）
②向服务器发送大量数据（POST 没有数据量限制）
③发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
GET实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function load()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();//创建XMLHttpRequest对象
//当 readyState 属性改变时，就会调用onreadystatechange函数。
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// 已经接收到全部响应数据
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
//点击按钮，实现异步刷新
<button type="button" onclick="load()">GET</button>
//显示接收到的内容
<div id="myDiv"></div>
</body>
</html>
POST实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function load()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();//创建XMLHttpRequest对象
//当 readyState 属性改变时，就会调用onreadystatechange函数。
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// 已经接收到全部响应数据
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","post.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
//点击按钮，实现异步刷新
<button type="button" onclick="load()">GET</button>
//显示接收到的内容
<div id="myDiv"></div>
</body>
</html>
三、jquery ajax
通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时能够把这些外部数据直接载入网页的被选元素中。本质还是XMLHttpRequest 或 ActiveXObject。
1、load方法
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法:$(selector).load(URL,data,callback);
必需的URL参数规定希望加载的 URL。
可选的data参数规定与请求一同发送的查询字符串键/值对集合。
可选的callback参数是load()方法完成后所执行的函数名称。
2、GET方法和POST方法
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
GET语法： $.get(URL,callback);
POST语法： $.post(URL,data,callback);
GET和POST方法参数参照load方法参数简介
实例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<input type="button" onclick="XmlSendRequest();" value='Ajax请求' />
</p>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
function JXmlSendRequest(){
$.ajax({
url: "http:/localhost:8080/test/", // 访问url地址
type: 'GET', // get方式提交
dataType: 'text', // 数据类型
success: function(data, statusText, xmlHttpRequest){ // 成功后返回的结果
console.log(data);
}
})
}
</script>
</body>
</html>
四、跨域Ajax
同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。浏览器遵循同源策略给网站正常的跨域带来了难题。
JSONP实现跨域请求：
JSON的扩充模式，在请求中增加一个约定的参数，用于识别请求是jsonp请求，后台识别到为jsonp的请求时，就以javascript的方式返回。
弊端：1、服务器需要改动 2、只支持get的方法 3、发送的不是XHR请求
实例：
$.ajax({
url:"http://127.0.0.1:8080/test/jsonp",
dataType:"jsonp",
jsonp:"callback2",
success:function(result){
console.log(result);
}
});
浙公网安备 33010602011771号