Ajax学习（2）

最新推荐文章于 2024-07-24 12:26:58 发布

ruiy

最新推荐文章于 2024-07-24 12:26:58 发布

阅读量337

点赞数

分类专栏： Ajax 文章标签： Ajax web http

本文链接：https://blog.csdn.net/b2997215859/article/details/50938240

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

有请求就有响应，在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>

注意要翻墙。。。。