介绍
读音：[ˈeɪˌdʒæks]
AJAX =Asynchronous JavaScript and XML（异步的JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
学习AJAX需要了解HTML、JS、CSS的知识。
作用
场景：
在网页上填写简历，页面中有几十项信息需要填写，填写过程中有若干项填写错误。
没有AJAX：
填写完成后，点击提交，上传所有信息，等待服务器的检查，再通知某一项填写错误。
使用AJAX：
填写过程中，每填写完一项，立刻发送到服务器检查，实时提示某一项是否填写正确。
使用
AJAX使用XMLHttpRequest对象实现异步请求、局部刷新，使用方法如下：
·运用HTML和CSS来实现页面，表达信息；
·运用XMLHttpRequest和web服务器进行数据的异步交换；
·运用JavaScript操作DOM，实现动态局部刷新。
创建 XMLHttpRequest 对象
var request;
if (window.XMLHttpRequest){// code for IE7+,Firefox,Chrome,Opera,Safari
request = new XMLHttpRequest();
} else {// code for IE6,IE5
request = new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest向服务器发送请求
request.open("GET","service.asp",true);
request.send();
| 描述 |
|
| open(method,url,async) |
规定请求的类型、URL以及是否异步处理请求。 · method：请求的类型；GET 或 POST · url：文件在服务器上的位置 · async：true（异步）或 false（同步），默认为true |
| send(string) |
将请求发送到服务器。 · string：仅用于 POST 请求 |
GET：一般用于信息获取。
· 使用URL传递参数。
· 对发送信息的数量也有限制，一般在2000个字符。
POST：一般用于修改服务器上的资源。
· 对所发送信息的数量无限制。
与POST相比，GET更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
·向服务器发送大量数据（POST没有数据量限制）
·发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
GET 请求示例
一个简单的 GET 请求：
request.open("GET",true);
request.send();
在上面的例子中，得到的可能是缓存的结果。为了避免这种情况，可以向URL添加一个唯一的ID：
request.open("GET","service.asp?t=" + Math.random(),true);
request.send();
request.open("GET","service.asp?fname=Bill&lname=Gates",true);
request.send();
POST 请求示例
使用POST请求传递参数，一定要记得在open和send方法之间使用setRequestHeader方法设置Content-Type为“application/x-www-form-urlencoded”：
request.open("POST",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("fname=Bill&lname=Gates");
XMLHttpRequest取得服务器的响应
当请求被发送到服务器时，客户端需要执行一些基于响应的任务。
当使用async=true时，可通过onreadystatechange事件处理服务器的应答：
request.onreadystatechange=function(){
if (request.readyState==4 && request.status==200){
//显示服务器返回的结果
document.getElementById("result").innerHTML=request.responseText;
}
}
每当readyState改变时，就会触发onreadystatechange事件。
readyState属性存有XMLHttpRequest的状态信息。
下面是XMLHttpRequest对象的三个重要的属性：
| 描述 |
|
| onreadystatechange |
|
| readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 · 0: 请求未初始化，即open还没有调用 · 1: 服务器连接已建立，即open已经调用 · 2: 请求已接收，即已接收到头信息 · 3: 请求处理中，即已接收到响应主体 · 4: 请求已完成，且响应已就绪，即响应已完成 |
| status |
200: "OK" |
在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当readyState等于4且状态为200时，表示响应已就绪。
示例
视频教程：http://www.imooc.com/video/5913
例子简介：
·新建员工信息，包含员工姓名、编号、性别、职位。
源码：ajax示例源码
扩展知识：
·PHP介绍及简单示例。（使用PHP实现服务器端的查询和新建功能）
·XAMMP介绍及启动。（XAMPP包含Apache、MysqL、PHP、PERL，是一个功能强大的建XAMPP软件站集成软件包）
·Dreamweaver中配置web服务器，制作网站，进行本地测试。
·Fiddler监听HTTP请求。（无需客户端代码既可测试服务器代码）。
扩展一：JSON
介绍
JSON：JavaScript对象表示法（JavaScript Object Notation）。
JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成。
JSON是独立于语言的，也就是说不管什么语言，都可以解析JSON，只需要按照JSON的规则来就行。
与XML比较
JSON的长度和XML格式比起来很短小。
JSON读写的速度比XML快。
JSON可以使用JavaScript内建的方法直接进行解析，转换成JavaScript对象，非常方便。
与AJAX的关系
在AJAX中，使用JSON传递数据已成为事实上的标准，很少使用XML。
语法
JSON数据的书写格式是：名称/值对。
例如：”name”:”ZhangSan”
注意：与JavaScript的对象表示法有些区别，就是键值在JS中不需要使用引号，但是在JSON中必须要有引号。
JSON的值可以是下面这些类型：
·数字（整数或浮点数），比如123，1.23
·字符串（在双引号中）
·逻辑值（true或false）
·数组（在方括号中）
·对象（在花括号中）
·null
例如：
{
"staff": [
{
"name": "user1",
"age": 23
},
{
"name": "user2",
"age": 22
},
{
"name": "user3",
"age": 21
}
]
}
解析
JSON在JS中的解析有两种方法：eval和JSON.parse。
var jsondata = ‘{"staff": [{"name": "user1","age": 23},{"name": "user2","age": 22},{"name": "user3","age": 21}]}’;
var jsonobj = eval(‘(’ + jsondata + ‘)’);
alert(jsonobj.staff[0].name);
在代码中使用eval是很危险的，eval无法捕获json对象中的语法错误！特别是用它执行第三方的JSON数据（其中可能包含恶意代码）时，尽可能使用JSON.parse()方法解析字符串本身，该方法还可以捕捉JSON中的语法错误。
var jsondata = ‘{"staff": [{"name": "user1","age": 21}]}’;
var jsonobj = JSON.parse(jsondata);
alert(jsonobj.staff[0].name);
校验及格式化
JSON在线校验工具：http://jsonlint.com/
示例
视频教程：http://www.imooc.com/video/6159
扩展二：jQuery
介绍
jQuery是一个轻量级的JavaScript库。
jQuery极大地简化了JavaScript编程。
与AJAX的关系
jQuery中封装了AJAX的方法，利用第三方库可以不考虑浏览器，简化操作。
语法
基础语法：
$(selector).action();
获取指定ID的对象的值：
$(“#id”).val();
设置指定ID的innerHTML的值：
$(“#id”).html(string);
使用AJAX：
$.ajax({settings})
·type：类型，“POST”或“GET”，默认为“GET”
·url：发送请求的地址
·data：是一个对象，连同请求发送到服务器的数据
·dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来只能判断，一般我们采用json格式，可以设置为“json”
·success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串
·error：是一个方法，请求失败时调用此函数，传入XMLHttpRequest对象
示例
$.ajax({
type:"POST",
url:"servicejson.php",
dataType:"json",
data:{
name: $("#name").val(),
number: $("#number").val(),
sex: $("#sex").val(),
job: $("#job").val()
},
success: function(responseJson){
if (responseJson.success){
$("#createResult").html(responseJson.msg);
}else{
$("#createResult").html("出现错误："+responseJson.msg);
}
},
error: function(xmlHttpRequest){
alert("error:"+xmlHttpRequest.status);
}
});
扩展三：跨域问题的处理
介绍
域名地址的组成：
当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。
不同域之间相互请求资源，就算做“跨域”。
与AJAX的关系
JavaScript出于安全方面的考虑，有同源策略的限制，不允许跨域调用其他页面的对象。
解决方法一：代理
通过在同域名的web服务器端创建一个代理。
例如：
北京服务器（域名：www.beijing.com）
上海服务器（域名：www.shanghai.com）
可以在北京的web服务器的后台建立一个上海服务器的代理www.beijing.com/proxy-shanghaiservice.asp来调用上海服务器www.shanghai.com/service.asp的服务，然后再把响应结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。
解决方法二：JSONP
JSONP可以解决主流浏览器的跨域数据访问的问题，只能解决GET方法的跨域访问。
在前端代码中声明jsonp：
$.ajax({
type:"GET",
url:"http://127.0.0.1:8080/ajaxdemo/servicejsonp.php?number="+$("#idNum").val(),
dataType:"jsonp",
jsonp:"callback",
success: function(responseJson){
if (responseJson.success){
$("#searchResult").html(responseJson.msg);
}else{
$("#searchResult").html("出现错误："+responseJson.msg);
}
},
error: function(xmlHttpRequest){
alert("error:"+xmlHttpRequest.status);}
}
);
function get(){
$jsonp = $_GET["callback"];
echo $jsonp.'({"success":true,"msg":"Method GET!"})';
}
解决方法三：XMLHttpRequest Level2
HTML5提供的XMLHttpRequest Level2（XHR2）实现了跨域访问。
不过IE10以下的版本不支持XHR2这一标准。
使用XHR2只需要在服务器端的代码中添加两行代码允许跨域访问即可：
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST,GET");
学习资源
AJAX教程：http://www.w3school.com.cn/ajax/index.asp
AJAX视频教程：http://www.imooc.com/view/250
原文链接：https://www.f2er.com/ajax/163707.html