Django框架之原生JS Ajax

小编在去年的时候,接触到表格分页,当时也在网上找资料,也了解到Ajax。当时对有一些概念理解还不是很深刻,今天结合demo,一起探讨一下基于原生JS的Ajax。

一、Ajax到底是个什么鬼?

Ajax是“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。

二、Ajax特点:

1、与服务器异步交互(也就是偷偷的和服务端进行数据交互,服务端压力较大)

2、浏览器局部刷新(提高用户体验)

三、Ajax的四部曲:

1、创建核心对象(XMLHttpRequest)

2、使用核心对象打开与服务器连接(open方法)

3、向服务端发送数据

4、监听状态,根据状态码处理服务端返回数据

四、番外篇:

在Ajax四部曲中,小编提到了状态码,那状态码究竟都有什么呢?

0-->初始化未完成状态,只是创建了XMLHttpRequest对象,还未调用open()方法

1-->请求开始,open()方法已调用,但还没有调用send()方法

2-->请求发送完成状态,send()方法已经调用

3-->开始读取服务器相应

4-->读取服务器相应结束

五、Ajax请求实例

urls.py

path('index/', views.index), // 渲染首页html

path('ajax_recieve/', views.ajax_recieve), // ajax请求路径

views.py

def index(request):

return render(request,"index.html")

def ajax_recieve(request):

return HttpResponse("Hello")

index.html

Ajax

function func1() {

var xmlhttp = creatXMLHttpRequest();

// open(method,url,async) async默认为true

xmlhttp.open("get","/ajax_recieve/",true);

// send内部是请求体,对于get请求,请求体在URL,为了兼容浏览器,get请求常写成send(null)

xmlhttp.send(null);

xmlhttp.onreadystatechange = function () { // 监听状态变化

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

alert(xmlhttp.responseText) // responseText服务端返回数据 Hello

}

}

}

//创建XMLHttpRequest核心对象

function creatXMLHttpRequest() {

var xmlHttp;

xmlHttp = new XMLHttpRequest();

return xmlHttp;

}

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190217G113SN00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券