Ajax跨域
1.jsonp跨域
jsonp跨域是通过script标签的跨域请求资源的能力，先利用JS在dom中创建一个script，把json里的url地址赋给script的src属性，然后新建一个script把url地址赋给script。
获取数据的方法：通过callback回调函数，把回调函数给cd (&cb=callback)后面再加上&wd='+txt.value+'&s='+Math.random();
function callback(json) {
// var
list.innerHTML='';//把调出的数据放到这里面
for (var i = 0; i < json.s.length; i++) {//返回的是一个json对象（如果要是返回一个json字符串就要传换成json对象）
list.innerHTML+='<li>'+json.s[i]+'</li>'；
};
};
在body中设置一个ul标签用来放JS中添加的li。
json跨域没有通过创建新的XMLHttpRequest对象（用于在后台与服务器交换数据），而是直接添加一个script标签把要调用的数据库的地址赋给script，再把script标签给body，通过callback回调函数来查询数据库中所要调取的内容（通过callback回调函数获取的json是json对象不需要转换直接可以用），把获取的json对象里面的json.s显示出来（s是json对象的数组）。
固定写法不能改变：获取百度数据库的规定写法
var urls='http://suggestion.baidu.com/su&cb=callback&wd='+txt.value+'&s='+Math.random();
（Math.random（）一般来说后台数据都是在不断更新的，如果每次请求的地址名字一样那么所更新的内容就不会变，要加一个让它内次请求的地址的名字不一致就可以解除这个问题，加一个随机数或者随机的时间。）
json跨域callback回调函数的固定写法：（list.innerHTML='';是要把获取数据的内容放在这里，这个可以改变）
function callback(json) {
list.innerHTML='';
for (var i = 0; i < json.s.length; i++) {
list.innerHTML+='<li>'+json.s[i]+'</li>'；
};
};
2.Ajax跨域：
ajax跨域和json跨域都是通过相同的地址，但是方法不同。
当按键按下事件被触发的时候：
ajax跨域要先创建一个XMLHttpRepuest 获取与后台数据库连接的对象
固定式写法
if（window.XMLHttpRequest）{
var xhr=new XMLHttpRequest();
}else{
var xhr=new ActiveXObject('Microsoft.XMLHTTP');//用于IE 5 6
};
1种：get方法
xhr.open('get','baidu2.php?wd='+txt.value+'&s'+Math.random(),true)； 地址：地址已经写到php文件中去了直接就可以写PHPtrue异步传输 的地址？隔开搜索的关键之txt.value（我要获取的数据传给wd）；
2.post方法：用到post的时候一定要加上一句话xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.open('post','baidu2.php',true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");// setRequestHeader是递交到服务器的
xhr.send('wd='+txt.value);//（xhr.send（）向后台发送请求）get的时候send里面不能加任何东西，post中可以加东西，'wd='+txt.value搜索后台的关键字。
服务器响应请求：
xhr.onreadystatechange=function(){//服务器响应时间
if (xhr.readyState==4) {
if (xhr.status==200) {
var str=xhr.responseText;
var json=eval('('+str+')');
con.innerHTML='';
for (var i = 0; i < json.s.length; i++) {
con.innerHTML+='<li>'+json.s[i]+'</li>';
};
}
};
}
代码：post写法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0; padding:0; list-style: none;}
#txt{width:490px; height:30px; position:absolute; top:20px; left:380px; font-size: 20px; padding: 0 5px;}
#con{width:502px; position:absolute; top:54px; left:380px; border:1px solid #ccc;}
#con li{font-size: 16px; padding:0 10px; background: #f4f4f4; cursor: pointer;}
#con li:hover{background: #ccc;}
</style>
</head>
<body>
<input type="text" id="txt">
<ul id="con">
</ul>
</body>
<script>
var txt=document.getElementById('txt');
var con=document.getElementById('con');
txt.onkeyup=function() {
if (window.XMLHttpRequest) {
var xhr=new XMLHttpRequest();
}else{
var xhr=new ActiveXObject('Microsoft.XMLHTTP');
};
xhr.open('post','baidu2.php',true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send('wd='+txt.value);
xhr.onreadystatechange=function() {
if (xhr.readyState==4) {
if (xhr.status==200) {
var str=xhr.responseText;
var json=eval('('+str+')');
con.innerHTML='';
for (var i = 0; i < json.s.length; i++) {
con.innerHTML+='<li>'+json.s[i]+'</li>'
};
};
};
};
};
</script>
</html>
代码：get写法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0; padding:0; list-style: none;}
#txt{width: 490px; height: 30px; font-size: 20px; padding: 0 5px; position: absolute; top: 20px; left: 380px;}
#con{border: 1px solid #ccc; width: 502px; position: absolute; top: 54px; left: 380px;}
#con li{font-size: 16px; padding: 0 10px; background: #f4f4f4;}
#con li:hover{background: #ccc;}
</style>
</head>
<body>
<input type="text" name="" value="" id="txt">
<ul id="con"></ul>
</body>
<script>
var txt=document.getElementById('txt');
var con=document.getElementById('con');
txt.onkeyup=function(){
if (window.XMLHttpRequest) {
var xhr=new XMLHttpRequest();
}else{
var xhr=new ActiveXObiject('Microsoft.XMLHTTP');
}
xhr.open('get','baidu2.php?wd='+txt.value+'&s'+Math.random(),true)
xhr.send();
xhr.onreadystatechange=function(){
if (xhr.readyState==4) {
if (xhr.status==200) {
var str=xhr.responseText;
var json=eval('('+str+')');
// alert(json.s);
con.innerHTML='';
for (var i = 0; i < json.s.length; i++) {
con.innerHTML+='<li>'+json.s[i]+'</li>';
};
}
};
}
}
</script>
</html>
