一、什么是Ajax:
-
全称Asynchronous JavaScript and XML;
-
异步的 JavaScript 和 XML;
-
可以在不重新加载整个页面的情况下(偷偷发数据),与服务器交换数据并更新部分网页内容;
二、Ajax之XMLHttpRequest:
1)五步使用法:
1.创建XMLHTTPRequest对象
2.使用open方法设置和服务器的交互信息
3.设置发送的数据,开始和服务器端交互
4.拿到数据后执行相关操作
这是GET请求:
HTML:
<a class="btn" οnclick="AjaxSubmit2()">XMLHttpRequest点我</a>
<script>
function AjaxSubmit2() {
//第1步
var xhr = new XMLHttpRequest();
//第2步设置发送方法
xhr.open('GET','/ajax1.html?p=123');
//第3步设置发送数据
xhr.send(null);
//第4步,回调函数,拿到服务端数据后执行相关操作
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){ {# 有0,1,2,3,4 四个数字都代表4个状态 #}
// 接收服务端的全部信息
console.log(xhr.responseText);
}
};
}
</script>
POST请求:跟GET请求不一样的是需要加上请求头
HTML:
<a class="btn" οnclick="AjaxSubmit4()">XMLHttpRequest点我</a>
<script>
function AjaxSubmit4() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
console.log(xhr.responseText);
}
};
xhr.open("POST","/ajax1.html");
{# POST请求需要携带请求头,Django才能解析出来 #}
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8');
xhr.send("q=456");
}
</script>