Ajax学习（2）

来源：互联网发布：网页游戏修改软件编辑：程序博客网时间：2024/06/16 14:46

有请求就有响应，在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、8return 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" onclick="test1()" value="测试返回值"></input><input type="button" onclick="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" onclick="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="搜索" onclick="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>

注意要翻墙。。。。

0 0