Ajax技术
一、Ajax技术简介
什么是 Ajax？
AJAX = 异步 JavaScript + XML。
AJAX 是一种用于创建快速动态网页的技术（客户端）。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
总结：AJAX 是一种在无需重新加载(刷新)整个网页的情况下，能够更新部分网页的技术。
二、Ajax工作原理
以上工作原理流程的总结和梳理：
创建xhr对象—>发送请求—>创建response对象—>返回数据到客户端—>客户端接收数据并处理—>无刷新更新页面内容
三、Ajax中XMLHttpRequest对象
3.1、XMLHttpRequest的作用
1、XMLHttpRequest对象是 AJAX 的基础。
2、所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
3、XMLHttpRequest 对象用于和后台与服务器交换数据。并且可以在不重新加载整个网页的情况下，对网页的某部分进
行局部更新。
3.2、如何创建XMLHttpRequest对象
创建 XMLHttpRequest 对象的时候，存在不同的浏览器兼容性的问题。
1、所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
var xmlhttp=new XMLHttpRequest();
2、老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
创建 XMLHttpRequest 对象的语法：
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
综上所述，我们可以定义一个函数，专门负责来创建XMLHttpRequest对象；
//定义一个函数，创建出XMLHttpRequest对象
function createXhr() {
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
return xmlHttp;
}
三、如何请求服务器端
3.1、GET方式的请求
var xmlHttp = createXhr();
//设置参数标准
xmlHttp.open("GET", "myAction.action", true);
//发送请求
xmlHttp.send();
如果在请求的过程中，需要向服务器传递参数，则直接在URL地址后通过 ？ 和 &符号进行传递即可。
3.2、POST方式的请求
var xmlHttp = createXhr();
//设置参数标准
xmlHttp.open("POST", "myAction.action", true);
//设置允许写入数据到协议体的包中
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//传入相应的数据信息
xmlHttp.send("m=list&name=admin&pwd=123456");
若果没有参数需要传递到服务器端的话，则不需要设置请求头 ，send函数中也不需要传递参数。
前面所讲内容的总结：
1、就是我们如何通过Ajax技术实现对服务器端发出请求。
2、在不同的请求方式下，如何向服务器传递参数的操作。
四、Ajax如何实现响应
4.1、Ajax响应情况介绍
Ajax服务器响应？
需要获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText 属性
如果来自服务器的响应并非 XML，请使用 responseText 属性。
responseXML 属性
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性。
提示：Ajax请求可以返回的数据格式类型：文本、HTML、JSON、XML
4.2、借助属性获取响应结果
//onreadystatechange事件属性的使用
xmlHttp.onreadystatechange = function(){
//响应全部就绪（通过状态码来进行确定）
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//获取数据，并进行显示
var content = xmlHttp.responseText;
var sp = document.getElementById("sp");
sp.innerHTML = content;
}
};
提示！
responseText属性：可以针对服务器端响应的html 、 文本 、json格式可以进行接收；
responseXML属性：仅仅只是针对服务器端响应的xml格式进行接收；
备注！json格式其实就是一个带有格式的字符串，比较的轻巧，经常进行使用（配合js比较适合）；
五、响应的各种数据格式
Ajax请求可以返回的数据格式类型：文本、HTML、JSON、XML
//定义一个函数，创建出XMLHttpRequest对象
function createXhr() {
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
/**
* 接收响应的HTML格式
*/
function sendPostRequest(){
//调用函数创建发送器的对象
var xmlHttp = createXhr();
//设置参数标准
xmlHttp.open("POST", "myAction.action", true);
//设置允许写入数据到协议体的包中
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//传入相应的数据信息
xmlHttp.send("m=post&name=admin&pwd=123456");
xmlHttp.onreadystatechange = function(){
//响应全部就绪
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//获取数据
var content = xmlHttp.responseText;
var sp = document.getElementById("sp");
sp.innerHTML = content;
}
};
}
/**
* 接收响应的是一个文本内容
*/
function sendGetRequest(){
//调用函数创建发送器的对象
var xmlHttp = createXhr();
//设置参数标准
xmlHttp.open("GET", "myAction.action?m=get", true);
//发送请求
xmlHttp.send(null);
xmlHttp.onreadystatechange = function(){
//响应全部就绪
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//获取数据,这个数据是一个纯文本的形式ok
var content = xmlHttp.responseText;
alert(content);
}
};
}
/**
* 接收响应的是json格式
*/
function sendGetRequestJson(){
//调用函数创建发送器的对象
var xmlHttp = createXhr();
//设置参数标准
xmlHttp.open("GET", "myAction.action?m=json", true);
//发送请求
xmlHttp.send(null);
xmlHttp.onreadystatechange = function(){
//响应全部就绪
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//获取数据,这个数据是一个json格式的字符串
var jsonStr = xmlHttp.responseText;
// alert(jsonStr);
//js中如何解析json
//使用eval转换函数进行 json格式字符串---->json对象的 转换过程; (第一种方式)
//var jsonObj = eval('('+jsonStr+')');
//使用JSON中的parse函数来进行转换 （第二种方式）【推荐】
var jsonObj = JSON.parse(jsonStr); //预先检查jsonStr的格式是否正确
//从json对象中获取数据
alert(jsonObj.name);
alert(jsonObj.age);
}
};
}
提示！
有关json的相关信息，可以在runoob.com中进行了解（作为一个补充的辅助学习资料）；
六、Jquery实现Ajax
6.1、$.get()
在jQuery中 $.get()函数的功能比较单一
它是专门用来发起get请求的 从而将服务器上的资源请求到客户端来使用
$.get()函数的语法如下
$.get( url , [data] ,{callback})
第一个参数url 是字符串类型 也是必须要有的 他代表 要请求的资源地址
第二个参数data 是要以对象方式 它代表请求资源期间需要携带的参数 如果没有 就全部返回
第三个参数 callback 是要以函数的方式 他代表请求成功时 的回调函数 它也是可以没有的
我们设定一个按钮 点击就使用get请求方式按照资源地址获取数据
不带参数：
$('#btn').on('click', function(){
$.get('http://www.liulongbin.top:3006/api/getbooks',function(data){
console.log(data);
})
});
携带参数：
$('#btn').on('click', function(){
$.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(data){
console.log(data);
})
})
6.2、$.post()
在jQuery中 $.post()函数的功能比较单一
它是专门用来发起post请求的 从而将服务器上的资源请求到客户端来使用
$.post()函数的语法如下
$.post( url , [data] ,{callback})
第一个参数url 是字符串类型 也是必须要有的 他代表 要提交的资源地址
第二个参数data 是要以对象方式 它代表请求资源期间需要提交的数据 他也是可以没有的
第三个参数 callback 是要以函数的方式 他代表数据提交成功时 的回调函数 它也是可以没有的
语法如下：
<button>POST</button>
<script>
$(function () {
$("button").on("click", function () {
$.post(
"http://www.liulongbin.top:3006/api/addbook",
{ bookname: "水浒传" },
function (data) {
console.log(data);
}
);
});
});
</script>
6.3、ajax（）
我们之前上面两个方法过于单一
我们jQuery给我们提供了ajax方法
语法如下
$.ajax({
type:'', 代表请求的方式 可以是GET和POST 注意是大写
url：'', 代表请求的url地址
data：{}, 代表要提交给服务器的数据
dataType:'', 表示服务器预计返回的数据格式类型
succes：function(data){} 请求成功的回调函数
})
使用$.ajax()发起get请求
使用$.ajax()发起get请求， 只需要将type属性的值设置为‘GET’ 即可：
<button> 点击 </button>
<script>
$(function () {
$('button').on('click', function(){
$.ajax({
type: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
data:{ id : 1},
success: function(data){
console.log(data);
}
})
})
})
</script>
使用$.ajax() 发起POST请求
使用$.ajax()发起post请求， 只需要将type属性的值设置为‘POST’ 即可：
<button> 点击 </button>
<script>
$(function(){
$('button').on('click', function(){
$.ajax({
type: 'POST',
url: 'http://www.liulongbin.top:3006/api/addbook',
data:{ bookname:'水浒传',
author: '施耐庵',
},
success: function(res){
console.log(res);
}
})
})
})
</script>
6.4、getJSON()
getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。
$(document).ready(function(){
$("button").click(function(){
$.getJSON("demo_ajax_json.js",function(data){
$.each(data, function(i){
$("div").append(data[i] + " ");
});
});
});
});