ajax 介绍，ajax的请求通过js中的 xmlHttpRequest对象完成
Posted 谷永辉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax 介绍，ajax的请求通过js中的 xmlHttpRequest对象完成相关的知识，希望对你有一定的参考价值。
ajax （Asynchronous javascript And XMl） 异步JavaScript和xml，传输的数据是xml,现在是json数据，
使用JavaScript与
同步交互：发出一个请求，等待服务器响应结束，才能发出第二个请求
异步交互：发出一个请求，无需等待服务器响应解除，就可以发出第二个请求。
ajax的特点：异步，和局部刷新
json对象，值的都是字符串，在js的对象，
如：在python语言和php语言传输数据，是需要一个解析器的，json字符串存的就是字符串，不需要解析器，
优点：局部刷新性能高，异步请求，
缺点：不适合所有场景，有时用到同步交互，
请求次数过多，增大服务器压力，
ajax是使用JavaScript技术实现的，还需要处理浏览器的兼容问题，
ajax的核心是在JavaScript中添加一个 xmlHttpRequest对象，所有的请求都是xmlHTTPRequest对象来完成的，
jquery 封装了JavaScript了，可以更快捷的实现ajax请求
ajax代码要写在前端页面中，
下面以实例讲解
在url 文件中，创建index api
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r‘^admin/‘, admin.site.urls), url(r‘^index/‘, views.index), -------index api , ]
在settings文件中配置静态文件的路径
STATIC_URL = ‘/static/‘ STATIC_ROOT = os.path.join(BASE_DIR,‘static‘)
在views文件文件，创建视图函数index，
from django.shortcuts import render,HttpResponse # Create your views here. def index(request): import time time.sleep(5)#等待5秒，才能看到请求的结果，这是同步 return HttpResponse(‘ajax !!!!‘)
在template模板中创建index页面，应用bootstrap 和jquery，
过程：
1.在index页面输入内容后，有get和post两种方法向后端发送数据，在ajax里，有需要的几个参数，针对不同的情况
url是必填的，是要谁发送请求，
type 是发送request的方法，默认是GET方法，可以不写，但如果是POST方法，就要标明了
data： 是要发送的数据，以json的格式发，
success：是回调函数，处理拿到后端或者服务器返回的数据，用参数接收，接收到的是json数据类型，所以要把接收的数据进行解析，
error：是当请求或者返回发生错误的时候，用，
complete：是不管正确与否，都要执行的函数
statusCode： 是返回状态码，一个状态码对应一个函数，如： 是404 的错误，就可以执行一个函数，
2.当发送到url 参数对应的地址ajaxHandle后，就开始执行视图函数ajaxHandle，视图函数给出响应和判断，最终返回到页面，进行显示
发送的地址是ajaxHandle视图函数，由它执行处理请求，
{% load staticfiles %} ----------引用静态文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="{% static ‘bootstrap/jquery-3.2.1.js‘ %}"></script> </head> <body> 用户名：<input type="text"> <button>Ajax提交</button> </body> </html>
ajax 的get请求 ，是input框触发事件，包括发生错误的时候，触发error函数执行
{# ajax的get请求#}
$(".user").blur(function () {
var user=$(this).val();
ajax语法，在函数内，
$.ajax({
参数url 要发送到哪里
url:‘/ajaxHandle/‘,
ajax 的发送请求,不写，是默认get请求
type:‘GET‘,
date 是ajax给服务端或者后端发送的数据，要用json的数据格式
date:{"user":user},
回调函数，ajax发送完数据后，，就要处理后端或者服务器接收到的数据，就要用到回调函数，这就是异步，
success 里的date参数 就是接收到的json字符串（只有json可以在网络间传输，）,所以接收到后需要解析成js对象
date 数据就是视图函数传的返回值，
success:function (date) {
date=JSON.parse(date);
拿到数据开始判断，不正确，就给用户提示下
}，
如果请求数据是错误的，或者是没有请求到，就没必要处理这些数据，触发error函数执行
error：function（jpxmlHttpresponse，textStatue,err）{
#请求都是xmlHTTPRequest对象来完成的,
#textstatue ,就是请求完成的状态，
#err，底层通过throw抛出的异常对象，值与错误类型有关，
}，
complete是就像python的finally，try是正常执行的代码，except 是错误的时候执行的代码，finall就是不管正确错误都要执行的代码，
complete:function(jpxmlHttpresponse,textstatue){
},
statusCode 是状态码，是哪个状态码，就执行哪个函数
statusCode:{
"403":function(jpxmlHttpresponse,textstatus,err{
console.log(argument)
}
},
"404":function(){
}
})
})
ajax的post请求，是button触发事件，与form表单请求一样，都会被forbidden掉，
{# ajax的post请求,会被forbidden .#}
$("button").click(function () {
$.ajax({
url:"/ajaxHandle/",
type:"POST",
data:{"user":"egon"},
success:function () {
alert(333)
}
})
})
ajax发送的请求要有视图函数来处理ajaxHandle。
def index(request): # import time # time.sleep(5)#等待5秒，才能看到请求的结果，这是同步 return render(request,‘index.html‘) def ajaxHandle(request): #ajaxHandle 是index 发送请求要调用的函数，所以就要判断是那种方式的请求 if request.method =="POST": obj = HttpResponse("ok") obj.status_code=404 return obj print(‘ajax.....‘) #GET是发送的方法，get（）是去字典里的值 user = request.GET.get("user")#从页面中request里取出前端传来的数据 #user 与数据库的数据进行判断， # user.objects.filter(username=user) ret = {"flag":False} if user =="yuan": ret["flag"]=True return HttpResponse(json.dumps(ret))#HttpResponse必须返回的是一个实例
ajax的另一种发送方式：
$.ajax("/ajaxHandle/"){ }，url是必填的
ajax的另一种流程：
1.发送请求，
2.server接收请求，
3.server处理数据
4.server端返回响应，
5.ajax接收数据
如果5个步骤都顺利进行（返回200 OK）触发success函数执行，
def index(request):
# import time
# time.sleep(5)#等待5秒，才能看到请求的结果，这是同步
return render(request,‘index.html‘)
def ajaxHandle(request):
#ajaxHandle 是index 发送请求要调用的函数，所以就要判断是那种方式的请求
if request.method =="POST":
obj = HttpResponse("ok")
obj.status_code=404
return obj
print(‘ajax.....‘)
#GET是发送的方法，get（）是去字典里的值
user = request.GET.get("user")#从页面中request里取出前端传来的数据
#user 与数据库的数据进行判断，
# user.objects.filter(username=user)
ret = {"flag":False}
if user =="yuan":
ret["flag"]=True
return HttpResponse(json.dumps(ret))#HttpResponse必须返回的是一个实例
以上是关于ajax 介绍，ajax的请求通过js中的 xmlHttpRequest对象完成的主要内容，如果未能解决你的问题，请参考以下文章