Ajax_01

一、简介

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请求：获取响应结果，更新部分页面内容，不会重新加载整个页面。
• 同步与异步的区别：请求的机制不同，异步请求不会阻塞当前页面，而同步请求会阻塞当前页面。