AJAX
2017-08-19 本文已影响5人
钱塘
AJAX
-
从前端向服务器发数据的方式：
1、 把数据放在URL里发
2、 把数据放在form表单里发
3、 ajax发 -- 局部刷新
ajax两个特点： 局步刷新 异步传送
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，发能发出第二个请求
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束后，就可以发出第二个请求
-
优点：
- 无须刷新整个页面
- 服务器响应内容不再是整个页面，而是页面中的局部，所以ajax性能高
-
缺点：
- 向服务器发送的请求次数增多，加大了服务器压力
- AJAX是使用javascript技术完成的，所以还需要处理浏览器兼容问题
浏览器兼容性处理
创建xml核心对象方法
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;
}
-
AJAX技术四步操作
基于JS的AJAX的实现
1. 创建核心对象
step1: var xmlhttp=XMLHttprequest() xmlhttp就是核心对象
1. 使用核心对象打开与服务器的连接
ste2: xmlhttp.open("")
1. 发送请求
step2: xmlhttp.send("name=alex") // send()里请求体的内容 if GET请求: send(null)
1. 注册监听，监听服务器响应
step4: xmlhttp(if==4:{var context = xmlhttp.responetext}})
小结
创建XMLHttpRequest对象；
调用open()方法打开与服务器的连接；
调用send()方法发送请求；
为XMLHttpRequest对象指定onreadystatechange事件函数，这个函数会在
XMLHttpRequest的1、2、3、4，四种状态时被调用；
XMLHttpRequest对象的5种状态，通常我们只关心4状态。
XMLHttpRequest对象的status属性表示服务器状态码，它只有在readyState为4时才
能获取到。
XMLHttpRequest对象的responseText属性表示服务器响应内容，它只有在
readyState为4时才能获取到！
一个原生js实现ajax实例
## html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<input type="button" value="ajax_提交" onclick="func1()">
<script>
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;
}
function func1() {
var xmlhttp = createXMLHttpRequest();
xmlhttp.open("GET", "/ajax_recv/", true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = function () {
{# alert(xmlhttp.status);#}
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var data = xmlhttp.responseText;
alert(data);
}
}
}
</script>
</body>
</html>
----------------------------------------------------------------------
## views
from django.shortcuts import render, HttpResponse
# Create your views here.
def index(req):
return render(req, "index.html")
def ajax_recv(req):
return HttpResponse("huangke")
ajax发送POST请求
s
基于jQuery实现ajax
$.get
$.post
<script>
function func1() {
Test();
}
function Test() {
//$.get("/ajax_jquery/",{name:"huangke"});
$.post("/ajax_jquery/",{name:"huangke"},function (data) {
alert(data);
});
//$.post("/ajax_jquery/");
//$.post();
}
</script>
回调函数的参数就是服务器返回的数据。
回调函数对服务器返回的参数进行处理。
所谓同源是指，域名，协议，端口相同。
