有請求就有響應，在Ajax中響應中有幾種模式
1、普通文本返回
2、xml返回
返回需要在服務器端設置 header("Content-Type:text/xml");
然後客戶端就通responseXML可以獲取xml的dom對象，將其解析即可
客戶端測試代碼如下returnType.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>returnType</title>
<script type="text/javascript">
function createXML() {
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
//IE6、7、8
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function test1(){
//創建xhr實例
var xhr = createXML();
//打開鏈接
//ture爲異步，false爲同步
//異步的含義即，發送請求不等待服務器響應，繼續往下執行
//同步的含義即，發送請求後等待服務器響應，然後往下執行
xhr.open("GET","returnType.php",true);
//如何獲取返回信息
//通過監聽狀態的變化來獲取返回響應，同時節省時間
xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
// alert("請求完成了");
//alert(this.responseXML);
var xmldom = this.responseXML;
var chs= xmldom.getElementsByTagName("book")[0];
// alert(chs.firstChild.firstChild.wholeText);
// alert(chs.lastChild.firstChild.wholeText);
document.getElementById("btitle").value = chs.firstChild.firstChild.wholeText;
document.getElementById("bintro").value = chs.firstChild.lastChild.wholeText;
}
}
//發送器請求
xhr.send(null);
// alert("hello");
}
function test2() {
}
</script>
</head>
<body>
<input type="text" id="btitle"><br/>
<input type="text" id="bintro"><br/>
<input type="button" οnclick="test1()" value="測試返回值"></input>
<input type="button" οnclick="test2()" value="測試返回值"></input>
<div id="progress"></div>
</body>
</html>服務器代碼如下returnType.php
<?php
header("Content-Type:text/xml");
?>
<?xml version="1.0" encoding="utf-8"?>
<bookstore><book bid="b008"><title>天龍八部</title><intro>人生苦短</intro></book></bookstore>3、json格式
json格式其實就是字符串格式，傳到前臺還是用responseText接受，然後用eval解析成Js的對象，然後就可以愉快的訪問了
前端測試代碼returnJsonType.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>returnJsonType</title>
</head>
<body>
<script type="text/javascript">
function createXHR() {
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
// function createXML() {
// if(window.XMLHttpRequest){
// return new XMLHttpRequest();
// }else{
// //IE6、7、8
// return new ActiveXObject("Microsoft.XMLHTTP");
// }
// }
function test() {
var xhr = createXHR();
xhr.open("GET","./returnJsonType.php",true);
xhr.onreadystatechange = function(){
if(this.readyState==4 && this.status==200){
// alert(this.responseText);
var book = eval("("+this.responseText+")");
// alert(book);
document.getElementById("btitle").value = book.title;
document.getElementById("bintro").value = book.intro;
// alert(book.title);
// alert(book.intro);
}
}
xhr.send(null);
}
</script>
<input type="text" name="btitle" id="btitle"></input><br>
<input type="text" name="bintro" id="bintro"></input><br>
<input type="button" name="submit" value="測試返回爲json" οnclick="test()"></input>
<!-- <input type="button"></input> -->
</body>
</html>後臺測試代碼returnJsonType.php
<?php
$book = array("title"=>"天龍八部","intro"=>"人生八苦");
print_r(json_encode($book));
?>
當然後臺如果是個數組，那麼就可以使用json_encode來得到json對象，然後傳到那邊用eval解析成Js對象
如果是json對象轉化爲數組，則用json_decode來得到即可
4、jsonp返回
首先需要百度找到谷歌的jsonp接口，我們訪問該接口會返回一個json對象，並且可以採取回調函數來處理。實際上jsonp的方式不夠官方，也不能算ajax，其只是訪問了一個接口，然後得到json對象，並且是通過加載script的方式，因此不能算ajax
測試代碼returnJsonpType.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" name="keyword"></input>
<input type="button" value="搜索" οnclick="sear()"></input>
<div id="szone">asdf</div>
</body>
<script type="text/javascript">
function sear() {
var kw = document.getElementsByName("keyword")[0].value;
var url = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q='+kw+'&callback=aa';
var scr = document.createElement("script");
alert("adf");
scr.setAttribute("type", "text/javascript");
scr.setAttribute("src",url);
document.getElementsByTagName("head")[0].appendChild(scr);
}
function aa(res){
// alert(res);
console.log(res);
var szone = document.getElementById("szone");
var results = res.responseData.results;
var str = "";
for(var i in results){
str+='<p>'+results[i].title+'<br/>'+'</p>';
str+='<p>'+results[i].content+'<br />'+'</p>';
str+='<p>'+results[i].url+'<br />'+'</p>';
}
szone.innerHTML = str;
}
</script>
</html>