一、简介
Ajax(Asynchronous JavaScript and XML)(异步JavaScript和XML)。用于向服务器发送异步请求
作用
在不重新加载页面的情况下,可以与服务器交换数据更新部分网友的数据。
传统请求
请求的响应会刷新当前整个页面,会用一个新的页面替换当前页面内容
2、传统请求与Ajax请求的区别
传统请求,在提交一个请求后,服务器返回数据,会更新整个页面。
Ajax 是一种在无需重新加载整个网页的情况下,可以与服务器交换数据并更新部分网页内容 。
总结:传统请求方式得到是一个页面,而Ajax获取的服务器的数据,而不是整个页面。ajax不会刷新整个页面,只是更新页面的部分内容,效率要比传统请求效率更高。
在2005年,Google通过Google Suggest使Ajax变得流行起来
二、ajax的使用
Ajax是客户端技术,运行在浏览器,向服务器发送异步请求,并更新部分页面内容。
同步:指发送一个请求,需要等待服务器返回结果,然后才能继续后面的任务,有个等待过程。
异步:指发送一个请求,不需要等待返回,随时可以做别的操作,不需要等待。
1、创建核心对象
老版浏览器
var xhr =new ActiveXObject("Microsoft.XMLHTTP");
新版浏览器
var xhr =new XMLHttpRequest();
兼容所有的浏览器
var xhr;
if (window.ActiveXObject ){
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}else if(window.XMLHttpRequest){
xhr = new XMLHttpRequest()}
2、发送get请求
发送请求到服务器,需要使用open()和send()方法:
xhr.open('get','xxx/?name=xxx&password=123456',true) # 在url中拼接参数
xhr.send() # 向服务器发送请求 - view function
方法 | 描述 |
---|---|
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 method:请求的类型;GET 或 POST url:请求的服务器地址 async:true(异步)或 false(同步) |
send(string) | 将请求发送到服务器,string仅用于post请求中。 |
服务器接收请求
def checkusername(request):
name = request.POST.get("userName")
print("name=",name)
user = User.objects.filter(name=name)
if user:
return HttpResponse("用户名已存在") # 只需要返回部分内容,不需要返回整个html文件
return HttpResponse("用户名合法")
客户端接收响应
发送异步请求后,当readyState改变时,会触发onreadystatechange事件。(回调函数)
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 |
status | 200: “OK” 404: 未找到页面 |
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && xhr.status==200)
{
var text = xhr.responseText; //获得字符串形式的响应数据
console.log(text)
}
}
3、Ajax工作原理
4、POST请求
应用
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
xhr.open("POST",url,true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 发送表单数据xhr.send("name=Henry&password=123456"); # 在send方法中传参
CSRF跨站请求伪造:
方式一
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
xhr.send("username="+name.value+"&csrfmiddlewaretoken="+"{{ csrf_token }}")
方式二
xhr.setRequestHeader("X-CSRFToken","{{ csrf_token }}")
xhr.send("username="+name.value)
三、请求总结
- 传统请求与Ajax请求区别:浏览器对响应结果处理方式不同。
- 传统请求:使用一个新的页面来显现响应结果。
- ajax请求:获取响应结果,更新部分页面内容,不会重新加载整个页面。
- 同步与异步的区别:请求的机制不同,异步请求不会阻塞当前页面,而同步请求会阻塞当前页面。