首先分析使用ajax时候有那些不确定的因素
请求:1 请求的方式不确定
2 请求的地址不确定
3 请求是否异步不确定
4 发送的数据不确定
响应:5 返回的数据不确定
6 响应成功之后 需要处理的业务不一样
7 响应失败之后 需要处理的业务不一样
然后封装一个ajax函数
1 先声明一个全局变量$ 在$下面申明一个ajax
注意：1 函数传的参数是一个对象 需要判断是否是一个对象和判断是否为空
2 options里面的参数需要处理 判断传入post还是get 如果都没传 设置默认值get
3 options 可以获取地址栏相关的信息
4 async 判断是否是异步 false是同步 true是异步
5 判断data是否传参 需要遍历生成字符串还需要加个&
然后进行ajax编程
1 设置请求
请求行
请求头 get 默认不要传 post传xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
请求主体 get 传null
响应
通讯完成 xhr.readyState==4
响应成功 xhr.status==200
可以根据响应类型判断获取什么数据
返回的类型包含xml字符串 json字符串 text字符串
调用用户传的 成功之后回调函数
调用用户传的失败回调函数
通讯完成回调
ajax相互交互的原理
ajax的原理简单来说通过XmlHTTPRequest对象来向服务器发异步请求 从服务器获取数据 然后用javascript来操作DOM从而更新页面 其中最关键的一部就是从服务器获取数据 要清楚这个过程和原理 我们必须对XMLHttprequest有所了解
XMLHttpRequest是ajax的核心机制 他从i5就开始引入 是一种支持异步请求的技术 简单来说就是javascript可以及时向服务器提出请求和处理响应 而不阻塞用户 达到无刷新的效果
XMLHttpRequest这个对象的属性
onreadystatechange 每次状态改变所触发事件的事件处理程序
responseText 从服务器进程返回数据 是字符串形式
responseXML 从服务器进程返回的DOM兼容文档数据对象
status 从服务器返回数子代码 常见的404未找到 和 200 请求成功
statusText 伴随状态码的字符串信息
readyState 对象状态 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 ajax封装 原理
1 创建xhr对象 也就是创建一个异步调用对象
var xhr = new XMLHttpRequest();
2 给这个对象设置请求报文
2.1 设置请求行
xhr.open('get','10.XMLHttpRequest.php?name=xgg&age=10');
xhr.open('post','10.XMLHttpRequest.php');
2.2 设置请求头
由于是get请求按照默认的设置即可 没有必要
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
2.3 设置请求主体 和发送功能
xhr.send(null); get请求
xhr.send('name=xgg&age=10');
3 这个对象处理响应报文
3.1 响应相关信息 必须等通讯完成才能去哪
3.2 什么时候响应完成
3.3 需要通过事件监听 onreadyStatechange
3.4 readystate 网络通讯状态码
4 响应已完成 获取异步调用返回的数据
5 使用javascript和dom现实局部刷新
3 ajax请求时 如何解释json数据
使用eval()或者JSON.parse() 鉴于安全考虑 推荐使用JSON.parse()
JSON.parse(jsonobj) 将json字符串转化为对象
JSON.stringify(jsonobj); 可以将json对象转换成json对符串