/*****
拓展:JSON 对象与 String字符串的互相转换;
1. 由JSON--->转 String 字符串;
var str={"names":'小明};
var str1=JSON.stringify(str);
2. 由String--->转 JSON对象;
-注意:String字符串必须是JSON类型的字符串;
var str="{'name':'小明'}";
var str1=JSON.parse(str);
****/
Ajax (Asynchronous JavaScript and XML)
Ajax:主要作用是于后台服务器进行数据交互;
Ajax发送请求主要有四步:
1. 得到XMLHttpRequest对象(Ajax只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了Ajax);
var ajax=new XMLHttpRequest();
但是IE6以下不支持:IE6支持 ActiveXObject('Microsoft.XMLHTTP');
var ajax=new ActiveXObject('Microsoft.XMLHTTP');
------------------------以下是兼容方法:
function createAjax(){
var ajax;
try{
ajax=new ActiveXOject('Microsoft.XMLHTTP')
}catch(e){
ajax=new XMLHttpRequest();
}
return ajax;
}
--------------
2.打开与服务器连接
用XMLHttpRequest对象open()方法:
open():有三个参数:
1)请求方式:GET/POST
2)请求地址URL:就是接口网址;
3)请求是否异步:true代表异步请求;false同步请求;
ajax.open('GET','1.php',true);
3.发送请求
用XMLHttpRequest对象send()方法发送请求:
send():有一个参数:
》他的参数就是你要发给后台服务器的内容数据;
注意:
如果是GET请求方式他的参数必须写null;
如果是POST请求方式一定要在send()方法前加入头信息;
用XMLHttpRequest的setRequestHeader()方法;
setRequestHeader()方法:有2个参数:共有三套可选值:
//标准编码(安全方便)
》content-type :application/x-www-form-urlencoded
//上传文件必须用此编码
》content-type :multipart/form-data
//以纯文本的方式进行编码
》content-type :text/plain
POST请求方式:
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send('liergou');
GET请求方式:
ajax.send(null);
4.获取服务器响应信息
注册监听事件来获取响应信息:onreadystatechange
在此事件中可以用XMLHttpRequest对象的readyState和status分别获取服务器的状态和服务器响应码;
readyState:服务器一共有5个状态:
》0:刚创建Ajax还没有调用open()方法:
》1:请求开始调用了open()方法,但还没调用send()方法
》2:发送了请求,已经调用完成了send()方法;
> 3: 后台正在响应...
》4:服务器响应结束(通常我们只关心这个过程)
status:服务器响应码:
》200:响应成功(一般我们也只是关心这个响应码)
》404:请求错误
》500:服务器错误
.......................
如果请求响应成功我们可以用XMLHttpRequest的responseText、responseXML得到服务器给我们的信息;
responseText:得到服务器给我们的文本信息:
responseXML:得到服务器给我们的响应的内容:
---------------例子--------
ajax.onreadystatechange=function(){
//双重判断服务器是否响应成功
if(ajax.readyState==4&&ajax.status==200){
alert(ajax.responseText)//获取服务器信息
}
}
--------------------
jsonp:跨域请求:
1. 用js代码在head中生成一个Script标签
//生成一个Script标签
var scripts=document.creatElement('script');
//获得head标签
var header=document.getElementsByTagName('head')[0];
//把生成的标签加入到head标签中;
header.appendChild(scripts);
2. 给window对象添加一个callback对象,给callback中添加一个
sug方法在sug方法中操作服务器返回的数据;
这一步也叫做创建一个jsonp回调函数;
window[callback]={
sug:function(json){
header.removeChild(scripts)//删除生成的script标签
window[callback]=null//把回调制空;
alert(json)//这个参数就是服务器给的信息
}
}
3. 发送请求
scripts.src=url;//url就是我们请求的网址;
function jsonp(){
var scripts=document.createElement('script');
var header=document.getElementsByTagName('head')[0];
header.appendChild(scripts);
var callbackName='baidu';
window[callbackName]={
sug:function(json){
header.removeChild(scripts);
window[callbackName]=null;
json=json.s;
document.body.innerHTML=json[0];
}
}
var bd='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=w';
scripts.src=bd;//发送请求
}