什么是ajax? 用来做数据交互使用的
其原理: 通过XmlHttpRquest对象来向服务器发送异步请求的,从而从服务器中获得数据后,然后用js来操作DOM来更新页面
简单来说: 用于后台与服务器交互数据,这就能实现可以在不重新加载整个网页的情况下,对网页的部分进行更新
ajax的核心: 就是js对象 XmlHttpRequest
特点: 异步加载, 局部更新
异步: 一次一堆, 前一个没有完成, 后一个也能开始
同步: 一次一个, 前一个没有完成, 后一个不能开始
ajax给我们带来的好处: 1.页面无刷新, 在页面与服务器通信时,提高用户的体验…
注意: 凡是涉及到ajax的访问, 不能使用文件协议(已文件的方式访问)
1.创建XmlHttpRequest对象---> 用于与服务器交换数据的 ---> 相当与创建http请求的一个对象
var xhr = new XMLHttpRequest();
console.log(xhr.readyState);//0 请求未初始化
2.规定请求的类型(get , post),url地址,以及是否异步处理请求(布尔值),默认异步true
open()-->相当与服务器建一个特定端口的链接
xhr.open('get','./test.txt');
console.log(xhr.readyState);//1 服务器连接以建立
3.将请求发送到服务器,开始请求 send()
xhr.send();
console.log(xhr.readyState);//1 服务器连接以建立
4.等待响应,---> 因为不知道服务器什么时候才能返回我们需要的响应,要采用事件的机制去触发
xhr.onreadystatechange = function () {
//这个不是在响应时触发,在状态改变时触发
console.log(this.readyState);//2,3,4
//当响应已经就绪,则可以获取响应后的数据
if (this.readyState == 4){
console.log(this.responseText);//获取响应的文本
document.getElementsByTagName("body")[0].innerHTML=this.responseText;
}
switch (this.readyState){
case 2://请求已经接受
//获取响应报文里的响应头
console.log(this.getResponseHeader("server"));
console.log(this.getAllResponseHeaders());//获取全部的响应头
console.log(this.responseText);//不能获取响应类容
break;
case 3://请求处理中: 可能内容不完整
console.log(this.responseText);//获取响应类容
break;
case 4://整个响应的类容已经完整的下载下来了
console.log(this.responseText);//获取响应类容
break;
}
}
get请求: 基本用于从服务器获取数据,参数的传递都是通过url地址中的 ? 后面传递的
post请求: 一般都是业务数据,即表单提交,用户名登录,post也可以用来获取数据
ajax的应用: 是在浏览器与服务器之间异步加载数据的
$.load() : 从服务器加载数据
load()语法: $(selector).load(url, [data], function(response, [status], [xhr]){ })
jQuery中的语法:
$.ajax({
url:"请求的地址",
type:"请求的类型" get/post,
data:"要发送到服务器的数据",
dataType:"要求服务器返回的数据类型",
async:"请求是否异步处理,默认是异步",
success:function(){},
error:function(){}
})