作者：王志伟
邮箱：wangzhiwei@yumaomoney.com
更改历史
*2018-10-23 高天阳 迁移jquery使用Ajax示例
*2018-10-17 王志伟 初始化文档
1 什么是Ajax
Ajax全称：Asynchronous JavaScript and XML Ajax不是某种变成语言 而是一种无需重新加载整个网页的情况下能够更新部分网页的技术。
1.1 同步
1.2 异步
2 XMLhHttpRequest对象
2.1 创建XMLhHttpRequest对象
//实例化XMLhHttpRequest对象
var XHR = new XMLHttpRequest();
IE6以下浏览器不支持XMLhHttpRequest对象
if(window.XMLHttpRequest === undefined){
window.XMLHttpRequest = function(){
try{
//如果可用，则使用ActiveX对象最新版本
return new ActiveXObject("Msxml2.XMLHTTP.6.0");
}
catch(e1){
try{
//否则，回退到较旧的版本
return new ActiveXObject("Msxml2.XMLHTTP.3.0");
}
catch(e2){
//否则，抛出错误
throw new Error("XMLHttpRequest is not supported");
}
}
}
}
2.2 XMLhHttpRequest和本地文件
2.3 了解HTTP
Http 是计算机通过网络进行通信的规则 http 是一种无状态的信息 是指比如客户获得一张网页之后关闭浏览器，然后再一次启动浏览器，再登录该网站，但是服务器并不知道客户关闭了一次浏览器
一个完整的HTTP请求，通常包括7个步骤
一个HTTP请求包括四个部分
一个可选的请求头集合，其中可能包括身份验证信息(客户端环境信息)
服务器返回HTTP响应包括3个部分
一个数字和文字组成的状态码，用来显示请求的成功和失败
2.4 GET请求与POST请求的差异
GET
POST
2.5 HTTP状态码
2.6 XMLHttpRequest发送请求
open(method,url,async) send(string)
request.open("GET","get.php",true);
request.send()
request.open("POST","get.php",true);
request.send()
request.open("GET","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=高天阳&age=26");
2.7 XMLHttpRequest取得响应
var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange = function(){
if(request.readyState ===4&& request.status===200){
request.responseText
//做你的操作
}
}
应用场景？
3.JSON基本概念
JSON:Javascript对象表示法（Javascript Object Notation） JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读与编写，同时也易于机器解析与生成。 JSON是独立语言，也就是说不管什么语言都可以解析Json,只需要按照JSON的规则即可
var jsonStr='{"result":[{"name":"zhiwei","age":"18"},{"name":"gaogao","age":"20"},{"name":"xiaoyu":"age":"14"}]}'
3.1 解析JSON
eval和JSON.parse()的区别
禁止使用eval的原因
var jsonStr='{"result":[{"name":"zhiwei","age":"18"},{"name":"gaogao","age":"20"},{"name":"xiaoyu","age":"14"}]}'
//var jsonObject =eval('('+jsonStr+')');
//var jsonObject = JSON.parse(jsonStr);
alert(jsonObject[0].age)
规范的JSON返回值
{
"status":"success"
"msg":"not find"
"data":{
"name":"zhiwei..."
}
}
4.Jquery中的ajax使用
$.ajax({
type: 'GET',
url: '999.php',
data: {
uname:'Tom', age: 20
},
beforeSend: function(){
console.log('before send....');
console.log(arguments);
},
success: function(){
console.log('success....');
console.log(arguments);
},
error: function(){
console.log('error....');
console.log(arguments);
},
complete: function(){
console.log('complete....');
console.log(arguments);
}
});
5.跨越问题
Javascript出于安全方面的考虑，不允许跨域调用其他页面的对象、什么是跨域呢，简单地理解就是因为Javascript同源策略的限制
5.1判断跨域
5.2如何解决跨域
$.ajax({
type:"GET",
url:"url",
dataType:"jsonp",
jsonp:"callback",
success:function(){
...
}
})
服务器端的改动
相关面试题
1、ajax的实现和原理
2、Ajax的优缺点各说三条
3、AJAX机制，open的参数是什么
4、请解释 JSONP 的工作原理，以及它为什么不是真正的 AJAX
5、XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
//IE中通过new ActiveXObject()得到，Firefox中通过newXMLHttpRequest()得到
6、常见状态码的含义
400 Bad Request 客户端请求有语法错误，不能被服务器所理解
403 Forbidden 服务器收到请求，但是拒绝提供服务
404 Not Found 请求资源部存在，输入了错误的URL
500 Internal Server Error 服务器发生不可预期的错误
503 Server Unavailable 服务器当前不能处理客户端的请求，一段时间后可能恢复正常。
