什么是Ajax(Ajaj)
ajax(Asynchronous JavaScrip and XML 异步的javascript和xml)
可实现异步、局部的获取数据
XML格式 和 json格式: 虽然是说ajax，但是现在很少使用XML格式了，因为不方便操作，我们使用json格式，它和javascript语法很像，操作起来很方便。
json格式: 类似对象被大括号包围，并且键和值都都需要被双引号包裹(除了number值和boolean值);
json格式字符串: 这个和json格式唯一的区别仅仅是它是json格式的字符串,多了一对单引号。
JSON.parse(data) // json格式字符转json
JSON.stringify(data) // json转字符串
<name>aimeeget请求: 通常用来获取数据post请求: 通常用来上传数据
封装Ajax:
1. web浏览器
2. ajax对象
xml = new XMLHttpRequest()
3. 初始化HTTP请求参数(请求方式,地址,同步异步)
xml.open()
4. 发送请求
xml.send()
5. 监听数据
readyState发生改变的时候出发onreadystatechange事件
readyState五种状态:
0-(未初始化) 还没有调用send()方法
1-(载入) 已调用send()方法,正在发送请求
2-(载入完成) send()方法执行完成,已经接收到全部响应内容
3-(交互) 正在解析响应内容
4-(完成) 响应内容解析完成,可以在客户端调用了
6. 检查数据 使用
xml.status
HTTP状态码 xml.status
100: 信息类,表示web浏览器请求,正在进一步处理中
200: 成功,表示用户请求被正确接收正在进一步处理中 200 OK
300: 表示没有请求成功,客户端必须采取进一步的动作
400: 客户端错误,表示客户端提交的请求错误 列如:404 NOT Found
500: 服务器错误 表示服务器不能完成对请求的处理,如:505
基础ajax.js文件之get示范
注意点:
- XMLHttpRequest在IE7以上才出现，要做好以前浏览器的兼容处理；
function POST配置: 上传参数
注意点:
- 传值格式: username=aimee&age=18
- 拼接的字符串在第四步xml.send(data)这里上传
- 比get多xml.setRequestHeader()这个参数,告诉服务器编码格式
documentGET配置: 那GET也可以传参吗？
答案是: 可以的
注意点:
1. get请求传参拼接在url+?后方
function 终极大招: 封装Ajax
注意点:
- 多次使用get请求同一个地址，会产生缓存,post请求不会产生缓存,解决办法: 使用随机数或时间戳(这个更适合)
- (为什么插了张图片,这里要重新开始呢??)
- 防止有时候浏览器不认get、post的小写。兼容一下: method = method.toUpperCase();
document以下是html文件:
<!DOCTYPE html>
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
