AJAX

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

简单来讲ajax完成的是局部刷新与异步交互。

举例：

搜索引擎搜索框输入字符后下边显示可能要搜索的内容；

注册账号是显示昵称是否被使用

AJAX使用步骤

1.创建XMLHTTPRequest对象

2.open打开与服务器的连接

3.向服务器端发送请求

4.监听服务器发送回的响应

AJAX实现过程

1.一个简单的html页面

Title

ajax发送

2.创建XMLHttpRequest对象

为了处理浏览器兼容问题，需要创建不同种对象

function createXMLHttpRequest(){

var xmlHttp;

// 适用于大多数浏览器，以及IE7和IE更高版本

try{

xmlHttp = new XMLHttpRequest();

} catch (e) {

// 适用于IE6

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

// 适用于IE5.5，以及IE更早版本

try{

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e){}

}

}

return xmlHttp;

}

3.open打开与服务器的连接

open函数有三个参数：

提交方式，如GET,POST

url，get请求的的话可在后边加信息

一个bool值，表示是否使用异步请求，默认true

var xmlHttp = createXMLHttpRequest();

xmlHttp.open("POST", "/ajax_test/", true);

3.向服务端发送请求

post请求，发送的是个字符串，相当于post请求中的键值

xmlHttp.send("massage=ajax&username=sfencs")

get请求，由于get请求数据在url上，但send函数参数不能为空，所以

xmlHttp.send(null);

4.监听服务器响应

XMLHttpRequest对象在使用的时候有5种状态，每个状态对应着一个值：

0：只是创建了XMLHttpRequest对象，还未调用open()方法；

1：open()方法已调用，但还没调用send()方法

2：send()方法已调用

3：开始读取服务器响应

4：读取服务器响应结束

XMLHttpRequest对象有一个onreadystatechange事件，可以监听这五个状态，它会在XMLHttpRequest对象的状态发生变化时被调用

xmlHttp.readyState属性中存放在此时的状态值

通过以上内容，我们可以监听到来自服务器的响应

xmlHttp.onreadystatechange= function(){

if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {

var ele=document.getElementById('content');

ele.innerText=xmlHttp.responseText;

}

}

其中xmlHttp.responseText是客户端Httpresponse返回的内容，xmlHttp.status为服务器响应状态码

5.完整代码

Title

ajax发送

function createXMLHttpRequest(){

try {

return new XMLHttpRequest();//大多数浏览器

} catch (e) {

try {

return new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

return new ActiveXObject("Microsoft.XMLHTTP");

}

}

}

function func(){

var xmlHttp = createXMLHttpRequest();

xmlHttp.onreadystatechange= function(){

if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {

var ele=document.getElementById('content');

ele.innerText=xmlHttp.responseText;

}

}

xmlHttp.open("POST", "/handle_ajax/", true);

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

xmlHttp.send('message=ajax&username=sfencs');

}

//django view函数

def ajax_test(request):

return render(request, 'ajax_test.html')

@csrf_exempt

def handle_ajax(request):

print(request.POST)

return HttpResponse('ajax回复')

6.注意事项

1.监听函数xmlHttp.onreadystatechange必须要放在xmlHttp对象创建之后，中间不能有其他内容，否则xmlHttp对象就像是不起作用了一样，前后端都不会有响应。

2.post请求需要设置请求头信息xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)，否则服务器端会忽略请求体中的数据

3.在djangoviews函数中添加免除csrf跨站保护

from django.views.decorators.csrf import csrf_exempt

然后给视图函数添加装饰器@csrf_exempt，如果不这样做，django会提示Forbidden (CSRF token missing or incorrect.)

jquery实现ajax

引入jquery可以将文件放到一个static文件夹中，并在settings中添加

STATIC_URL = '/static/'

STATICFILES_DIRS=(

os.path.join(BASE_DIR,'static'),

)

1.$.get $.post

顾名思义，这两种方法是post方式和get方式，它们两者使用的方式是基本相同的。

参数为(url, [data], [callback], [type])

url表示发送路径，data表示发送的数据用字典存放，字典的键不用加引号，callback为回调函数的名称也可以直接使用匿名函数，type表示要从服务器端收到的数据类型，有text|html|json|script，规定了返回数据的类型后，如果服务器发送的不是这种类型，那么不会执行回调函数

将上一节中的func函数改为如下

function func(){

$.post("/handle_ajax/",{message:'aiax'},

function (back_data,status,xmlHttp){

var ele=document.getElementById('content');

ele.innerText=back_data;

}

)

}

这里回调函数中有三个形参，第一个为服务器返回的数据，第二个为状态信息，success或者是error，第三个就是XMLHTTPRequest对象，众多信息都存放在对象中

至于$.get，基本和post相同，只是传送的数据可以加到url后，一般还是把要传送的数据放到data中，这样可以避免编码问题。

2.$.getScript

通过 AJAX 请求来获得并运行一个 JavaScript 文件,即可以根据需要来决定是否引入

$.getScript("test.js", function(){ alert("Script loaded and executed."); });

jquery1.2版本后可以跨域调用js文件

3.$.getJSON

相当于$.get()最后一个参数为json

4.$.ajax

上述的方法都是相当于$.ajax的简写

$.ajax的参数有很多

async 参数类型Boolean，表示是否为异步请求，默认true

contentType 类型：String默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。

context 类型：Object 让回调函数内 this 指向这个对象，比如document.body，那么在回调函数中，$(this)就是这个对象

data 类型为字典Key/Value格式，发送到服务器的数据

dataType 预期服务器返回的数据类型

processData data中会将自动转换为请求字符串格式，processData默认为true，若不想将数据进行转换，知识发送原数据，可以将其设置为false

type string类型，表示请求方式

url 发送的地址

等等

回调函数：

beforeSend 参数类型函数，发送请求前可修改 XMLHttpRequest 对象的函数，XMLHttpRequest 对象是唯一的参数

error 在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象(如果有的话)error: function (jqXHR, textStatus, err){}

dataFilter 类型：Function 表示对ajax返回的数据进行预处理，有data和type两个参数，data为返回的原始数据，type为datatype参数，比如收到的是json类型，那么在预处理中tmp = JSON.parse(data)

success 请求成功后调用，传入返回后的数据，以及包含成功代码的字符串success: function (data，str){}

complete 无论请求成功与否，最后都会调用传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串complete: function (jqXHR, textStatus){}

一个简单的ajax实现

$.ajax({

url:'/handle_ajax/',

data:{message:'ajax'},

type:'post',

success:function (data){

var ele=document.getElementById('content');

ele.innerText=data;

}

}

)

5.json

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.

这里有json字符串和json对象两个概念

json字符串就是数据交换传输的信息格式，json对象其实是javascript对象的子集

数据传输或转换时，先将原数据转换成json字符串，使用时再将json字符串转换成json对象或者其他语言的数据格式

python与json对象的对应

python --> json

dict object

list,tuple array

str,unicode string

int,long,float number

True true

False false

None null

json字符串的的格式

数字 (整数或浮点数)

字符串 (在双引号中)

逻辑值 (true 或 false)

数组 (在方括号中)

对象 (在花括号中，引号用双引)

null

json字符串中的引号都为双引号

js中的JSON.parse()与JSON.stringify()

JSON.parse()将json字符串转换为json对象，JSON.stringify()将json对象转换为json字符串

ajax完成json数据发送

$.ajax({

url:'/handle_ajax/',

data:{message:'ajax'},

type:'post',

success:function (data){

var ele=document.getElementById('content');

var ret=JSON.parse(data)

ele.innerText=ret.name;

}

}

)

def handle_ajax(request):

print(request.POST)

dic={'name':'sfencs'}

message=json.dumps(dic)

return HttpResponse(message)

​