小编在去年的时候,接触到表格分页,当时也在网上找资料,也了解到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;
}
领取专属 10元无门槛券
私享最新 技术干货