1.什么是Ajax？
Ajax技术是使浏览器可以为用户提供更为自然的浏览体验
2.Ajax核心
Ajax的核心是JavaScript对象XmlHttpRequest。
该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使用户可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
特点：无刷新局部更新数据，至2016年，各大网站几乎都有使用。
3.Ajax的优势与缺点
优势：迅捷的反应速度
a.不需要插件支持
b.优秀的用户体验
c.提高Web程序性能
d.减轻服务器负担
缺点：
a.XmlHttpRequest对象浏览器支持不足，早些年只有IE浏览器支持（现已解决）
b.破坏 浏览器的“前进”、“后退”按钮的正常功能（现已解决）
c.对浏览器搜索引擎支持不足，无法搜索关键字（仍未解决）
d.开发和调试工具缺乏（仍未解决）webstorm可以
4.Ajax的应用
jQuery对Ajax进行了封装，可用其方法
a.底层方法：$.ajax()
一般用这种方法，直观快捷，二三层方法都是基于底层方法，需要调用底层方法
语法：$.ajax(options)
options是key/value形式，均为可选
示例：
$("#send").click(function(){ $.ajax({ type:"get", //提交方式 url:"test.asp", //地址 success:function(){} //执行成功的回调函数 ...... //可以写执行失败的回调函数 }); });
b.第二层方法：load() 、$.get()、$.post() get和post方法只有提交方式不同，其余一样，默认get方法
load()方法 将远程页面的响应代码插入DOM中
语法：load(url,[data],[callback])
url : 请求页面的地址
data(可选): 发送到服务器的key/value数据
callback(可选)： 请求完成时的回调函数(无论请求成功或者请求失败)
注意：无参data时以get方式提交，有参data时以post方式提交
示例：
$(function(){ $("#send").click(function(){ $("#resTex").load("test.html"); }); }); $(function(){ $("#send").click(function(){ $("#resTex").load("test.html",{name:"xxx",age:"21"},) function(responseText,textStatus,XMLHttprequest){ alert(responseText); //请求访问的内容 alert(textStatus); //请求的状态(成功或失败) alert(XMLHttprequest); //XMLHttprequest对象 }; }); });
$.get( ) 方法和 $.post( ) 方法
语法：
$.get( url [, data] [,callback] [, type] )
$.post( url [, data] [, callback] [, type] )
url：请求页面的 url
data（可选）：发送到服务器的 key/value数据
callback（可选）：请求完成时的回调函数（只有成功才被调用）
type（可选）：返回内容的格式（text, html, xml, script, json）
示例;
$("#send").click(function(){ //$.get()方法 $.get("AjaxHandler.ashx", {name: "张三", age:"21"}, function (data, status) { $("#div").html(data); }); }); //$.post()方法 $("#send").click(function(){ $.post("AjaxHandler.ashx", {name: "张三", age:"21"}, function (data, status) { $("#div").html(data); }); });
c.第三层方法：$.getScript()、$getJSON()
$.getScript( ) 与 $.getJSON( ) 方法
$.getScript( )：动态引入JS文件
语法：
$.getScript( JS文件的url ,[callback] )
$.getJSON( )：加载JSON文件
语法：
$.getJSON( JSON文件url ,[callback] )
5.具体使用步骤
//1.创建XMLHttpRequest对象 var xhr = new XMLHttpRequest();
//2.初始化XMLHttpRequest xhr.open("post","data/data1.txt",true); true表示异步请求
//3.设置回调函数 xhr.onreadystatechange = function(){ //readyState的值：0-未初始化，1-已初始化，2-已发送请求，还未接到响应，3-接到服务器响应数据，未完成，4-数据接收完成 //HTTP响应状态码：2xx : 成功，3xx : 请求需要进一步细化，4xx : 客户端错误，5xx : 服务器错误 if(xhr.readyState==4 && xhr.status==200){ document.getElementById("d1").innerHTML = xhr.responseText; } };
//4.发送请求 xhr.send(null);
