目录
2.AJAX核心对象 异步对象 - XMLHttpRequest
AJAX - 啊贾克斯
1.什么是AJAX
AJAX - Asynchronous Javascript And Xml
异步的 JS 和 Xml
同步访问：
当客户端向服务器发送请求时，服务器在处理过程中，浏览器只能等待
缺点：整个网页会刷新
异步访问：
当客户端向服务器发送请求时，服务器在处理操作的同时，客户端可以做其他的事情，不需要一直等待，效率较高
优点：局部刷新
使用场合：
1.搜索建议
2.表单验证
3.前后端完全分离
2.AJAX核心对象 异步对象 - XMLHttpRequest
1.什么是XMLHttpRequest
主要称为"异步对象"，代替浏览器向服务器发送请求并接收响应
该对象主要由JS来提供
2.创建异步对象
主流的异步对象是 XMLHttpRequest 类型的，
并且主流浏览器(IE7+,Chrome,Firefox,Safari,Oper)已经全部支持该对象
低版本浏览器中(IE7,6)是无法使用XMLHttpRequest，需要使用ActiveXObject来创建异步对象
判断浏览器是否支持XMLHttpRequest
if(window.XMLHttpRequest){
//如果浏览器支持XMLHttpRequest的话，window.XMLHttpRequest则是一个非undefined的值，
如果浏览器不支持的话，此处就是一个undefined
var xhr = new XMLHttpRequest();
}else{
// 浏览器不支持XMLHttpRequest
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
练习：
1.创建项目 - ajax
2.创建应用 - index (配置)
3.定义访问路径 /01_xmlhttp/
通过视图，显示 01_xmlhttp.html模板
4.定义一个按钮，点击按钮时，根据不同的浏览器创建不同的异步对象，并输出在控制台
3.xhr的成员
1.方法 - open()
作用：创建/打开请求
语法：xhr.open(method,url,asyn)
method:指定请求的方式，取值'get'或'post'
url:请求地址，字符串
asyn:指定是否使用异步的方式发送请求
true:使用异步
false:使用同步
ex:
//1.获取xhr对象(createXhr在common.js中是函数名，创建异步对象)
var xhr=createXhr()
//2.创建请求
xhr.open('get','/01_server/',true)
2.属性 - readyState
作用：请求状态，通过不同的请求状态来表示xhr与服务器的交互情况0-4共5个不同的状态
0：请求尚未初始化
1：已经与服务器建立连接
2：服务端已经接收请求
3：请求正在处理中
4：响应已完成
3.属性 - status
作用：表示的是服务器端的响应状态码
200：表示服务器正确处理所有的请求并给出响应
403：请求被拒绝
404：请求资源未找到
500：服务器内部错误
4.属性 - responseText
作用：服务器端响应回来的文本
5.事件 - onreadystatechange
作用：每当readyState的值发生改变时就要出发的操作 - 回调函数
在此函数中，要判断 当readyState的值为4并且status的值为200的时候，才可以正常的接收响应数据(responseText)
6.方法 - send()
作用：发送请求
语法：xhr.send(body)
body:表示请求主体
get请求的话，此处为 null
post请求的话，此处为要提交的数据
4.使用AJAX发送get请求
1.步骤
1.创建 xhr 对象
2.创建请求 - open()
3.设置回调函数 - onreadystatechange
4.发送请求 - send()
2.发送带参数的get请求
在请求地址中追加参数即可
xhr.open('get','/02_server/?uname=sf.zh',true);
5.使用AJAX发送post请求
1.步骤
1.创建 / 获取 xhr
2.创建请求 - open()
3.设置回调函数 - onreadystatechange
4.发送请求 - send()
xhr.send("uname=sf.zh&upwd=123456");
2.csrf 验证
必须手动提交 csrfmiddlewaretoken 的值到服务器
否则无法通过csrf的验证,服务器会返回403
解决方案1:
1.在模板中,通过JS获取cookies中csrftoken的值
2.将获取出来的值,拼成参数,再发送给服务器
解决方案2:
保留...
3.必须设置一个请求消息头 - Content-Type
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
注意:该操作,要在 xhr.send() 之前增加