定义: 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。Ajax就是用 JS 发起一个请求,并得到服务器返回的内容。这跟以前的技术最大的不同点在于「页面没有刷新」,改善了用户体验,仅此而已。
get和post的异同
相同:
1.都是将数据提交到远程服务器上
不同:
1.提交数据存储的位置不同:get请求会把数据存放在url后面;post请求会把数据存放在请求头中
2.提交数据大小限制:get有大小限制;post没有大小限制
3.安全性:get适用于非敏感信息;post数据传输安全性较高
ajax的五部:
-----------GET
1.创建一个异步对象
var xml = new XMLHttpRequest();
2.设置请求方式和请求地址
xml.open("GET","xxx.php",true);
// open参数有三个
// method:请求的类型:GET或POST
// url:文件在服务器的位置
// async:true(异步)
2.1 在发送请求地址方面,IE浏览器通过Ajax发送GET请求,那么IE浏览器会认为同一个URL只有一个结果,所以在url加上一个每次都不一样的参数,利用math.random或者Date日期getTime获取的秒数,也是每次都不一样的
//xml.open("GET","xxx.php",true);
xml.open("GET","xxx.txt?t="+(new Date().getTime()),true);
3.发送请求
xml.send();
4.监听状态的变化
xmlHttp.onreadystatechange = function(ev){.........}
5.处理返回的结果
if(xmlHttp.readyState === 4){
// xmlHttp.status 说明请求已经完成,并不一定成功
if(xmlHttp.status >=200 && xmlHttp.status < 300 || xmlHttp.status ===304){
// 成功
console.log("接收到服务器返回的数据");
}else{
conso.log("没有接收到服务器返回的数据");
}
}
readyState :存有XMLHttpRequest的状态,从0到4发生变化。判断请求有没有完成。并不代表请求成功,知识步骤走完,关于路径是否正确并不检查。
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成,且响应已就绪
status:服务器返回的状态码
200:“ok”
-------------POST
1.生成一个新的异步请求
var xhr;
if (window.XMLHttpRequest){
// 兼容: for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}else{
//兼容: for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
2.与GET一致的,open方法
xhr.open(type,url,true);
3.相比GET有个额外的操作,没有这个php会接收不到
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
4.与GET一致,send发送请求
xhr.send(str);
5.检测返回数值变化
xhr.onreadystatechange = function(){
if(xhr.readyState ===4){
// 判断请求成功
if(xhr.status >= 200 && xhr.status< 300 || xhr.status ===304){
// 成功
option.success(xhr);
}else{
// 失败
option.error(xhr);
}
}
}
拓展---------------ajax方法的封装
要素分析:1.需要数据获取的地址url 2.还有数据获取成功的执行语句和获取失败的执行语句。
function ajax(url,fnSccc,fnfail){
if(window.XMLHttpRequest){
var oAjax = new XMLHttpRequest();
}else{
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
oAjax.open('GET',url,true);
oAjax.send();
oAjax.onreadystatechange = function(){
if(oAjax.readyState==4){
clearInterval(timer);
if(oAjax.status == 200){
fnSccc( xhr);
}else{
if(fnfail){
fnfail(oAjax.status);
}
}
}
}
}
在以上方法上,进行改进。将传入的参数单独设置。且设置为对象键值对的形式、
function obj2str(obj){
// 把传入的参数从对象形式,改成字符串形式
// "userName":"lnj","passWord":"123",.......
obj.t = new Date().getTime();
//把时间戳也作为一个键值放入
var res = [];
for(var key in obj){
res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key])); //[userName=lnj,passWord=123]
}
return res.join("&"); //userName=lnj&passWord=123
// join方法是把数组中的所有的元素放入一个字符串,&作为指定的分隔符传入
}
function ajax(url,obj,timeout,success,error){
// 将对象转换成字符串
var str = obj2str(obj);
var xhr;
if (window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET",url+"?"+str,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState ===4){
// 判断请求成功
if(xhr.status >= 200 && xhr.status< 300 || xhr.status ===304){
// 成功
success(xhr);
}else{
// 失败
error(xhr);
}
}
}
// 判断外界是否传入超时时间
if(timeout){
timer = setInterval(function(){
// 停止发送请求
xhr.abort();
// 清空定时器
clearInterval(timer);
},timeout);
}
}
注意:
1.post传递的参数是不放在url后面的,那么之前封装的方法,将参数通过push与url合并成一个字符串的方法就不可行。对此,我们将参数单独拎出来,
2.这个封装是默认数据获取类型是get的,对照JQuery中Ajax方法,是可以识别大小写的,为此,在以上方法增加一个对数据识别方式的判断,并,利用toLowerCase()方法,将传入的type都转化成小写,与“get”对比。
3.encodeURIComponent 在提交请求的时候防止中文的出现。此方法会将字符串作为 URI 组件进行编码。在url只可以出现字母、数字、下划线、ASCΠ码值。
if(option.type.toLowerCase()==="get"){
// toLowerCase转换成小写,不管输入大写还是小写就都能识别
// get请求方法
xhr.open(option.type,option.url+"?"+str,true);
xhr.send();
}else{
// post请求方式
xhr.open(option.type,option.url,true);
// 1 跟GET不一样的点
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 2.不一样
xhr.send(str);
}
-----获取xml文件和json文件
1.xml与HTML一样,是由标签组成的。读取语句:.responseXML;
在success操作中:
// var res = xhr.responseXML;
// 找到标签
// var title = res.querySelector("title").innerHTML;
// var des = res.querySelector("des").innerHTML;
// var image = res.querySelector("image").innerHTML;
2.textt中json数据
读取语句:.responseText,通过[]能直接找到子对象,在子对象中,类似调用属性的方法,直接. 就可以调用到需要的属性值。相较于xml简单。
var obj = JSON.parse(xhr.responseText);
// 测试:成功转化成对象格式数据
console.log(obj);
var name = self.getAttribute("name")
// console.log(name);
// 获取nz的一整条信息,即obj的一个子对象,
var info_nz = obj[name];
// 拿到nz里面的属性,直接用.就可以
var title =info_nz.title;
var des =info_nz.des;
var image =info_nz.image;