ajax是什么:
- 英文翻译 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),就是异步的JavaScript。
ajax解决了什么问题:
- AJAX 是一种用于创建快速动态网页的技术。
- 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
- 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
原生ajax
function ajax1(url) {
//所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
const xhr = new XMLHttpRequest();
//老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
xhr =new ActiveXObject("Microsoft.XMLHTTP");
xhr.open('get', url, false);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4&&xhr.status == 200) {
/*
xhr.readyState的值
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
xhr.status http状态码
*/
console.log(xhr.responseText)//请求返回的的数据
}
}
xhr.send(null)
}
jquery的ajax
$(function(){
//请求参数
var list = {};
//
$.ajax({
//请求方式
type : "POST",
//请求的媒体类型
contentType: "application/json;charset=UTF-8",
//请求地址
url : "http://127.0.0.1/admin/list/",
//数据,json字符串
data : JSON.stringify(list),
//请求成功
success : function(result) {
console.log(result);
},
//请求失败,包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});
});
向服务器发送请求
xhr.open(method, url, async);
method
请求方式,get
或者post
,- url,请求地址,
async
值为true
或者false
,同步或者异步。send
将请求发送到服务器,仅用于POST
请求。post
请求 设置如下
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send('a=b&b=c');
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 不愿使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠