Ajax

ajax举例：

google maps其实是ajax应用，在地图上进行任意操作时，都无需刷新页面。ajax的实质就是让我们能够执行http请求而无需重载页面

DOM的结构

通过js来修改html页面。

<html>
	<head>
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		//<![CDATA[
			document.write("hello,world!");
		//]]
		</script>
	</body>
</html>

Ajax的含义：

异步js和xml（asynchronous javascript and xml）,如今它不一定异步，也不一定用 js，不一定用xml，它如今是一个代名词，代指在浏览器客户端动态修改html的技术。所谓异步就是指一次可以执行多个请求，具体讲就是当执行某个请求时，它不会阻碍网页剩余部分的运作。而同步在需要获得服务器的回应后才会有其他动作。

return false的用途

意思就是返回false，这样会阻止提交的动作，因此页面不会提交，故不会跳转到另一个页面

<form action="quote1.php" method="get" onsubmit="quote();return false;">  
<!--html 默认事件处理属性值里面放的是javascript-->
<input id="symbol" name="symbol" type="text"/>
<br/>
<input type="submit" value="Get Quote" />
</form>

跨浏览器的ajax

function quote()  
{  
    // instantiate XMLHttpRequest object  
	try      
	{  
 		xhr = new XMLHttpRequest(); 
 	}  
 	catch (e)//catch块会捕获异常而不是直接报错，尝试IE的方式  
 	{  
 		xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
 	}   
    // handle old browsers  
	if (xhr == null)  
	{  
		alert("Ajax not supported by your browser!");  
		return;  
	}  
	// construct URL，即构造数据来源的URL,
	//这里的quote1.php表示在服务器端的与html文件相同路径下的一个php文件，是个相对路径
	var url = "quote1.php?symbol=" + document.getElementById("symbol").value; 
    // 打开XMLHttpRequest对象连接
	xhr.onreadystatechange = handler; //handler是后面的处理函数  
	xhr.open("GET", url, true); //最后一个参数总为true,表示需要是异步的  
	xhr.send(null);//此时数据才真正发送给quote1.php  
}  
/* 
 * Handles the Ajax response. 
 */  
 function handler() //由XMLHttpRequest对象调用，只要状态改变则触发
{  
// only handle loaded requests  
	if (xhr.readyState == 4) //即请求完全载入状态  
	{  
		if (xhr.status == 200)
		//而且假设HTTP响应为200，即一切正常，而不是403权限错误或404文件未找到什么的  
		    alert(xhr.responseText);
		//此时用弹窗方式显示返回结果，php文件给回的responseText信息
	}
	else  
	{
		alert("Error with Ajax call!");  
	}  
}

//quote1.php  
<?php  
// get quote  
$handle = @fopen("http://download.finance.yahoo.com/d/quotes.csv?s={$_GET['symbol']}&f=e1l1", "r");  
if ($handle !== FALSE)  
{  
	$data = fgetcsv($handle);  
	if ($data !== FALSE && $data[0] == "N/A")  
		print($data[1]);  
	fclose($handle);  
}  
?>

为什么不直接从yahoo获得数据呢?

这是因为为了安全的同源策略，我们只能在网页所在的位置使用 ajax获取信息，如果从其他不受信任的位置获取信息，信息源处的人会意识到并且可能故意发送恶意数据，以此来破坏你的网页，因为你允许了这些不受信任的数据进入你的页面。

举例来讲就是ajax.html如果和quote1.php不在同一个服务器下面，那么就不能行。一般不会单独访问php文件，通常是在ajax.html中执行请求。

XMLHttpRequest对象的实例化方法大概有四五种

下面介绍了两种（虽然不全但能包括火狐,safari,chrome,ie），但基本上都是通过try-catch嵌套来尝试不同的实例化方法。在这一讲最后也会讲到使用库来进行实例化的方式状态也有很多种

XMLHttpRequest的状态

onreadystatechange

0 unitialized
1 open
2 sent
3 receiving
4 loaded

readyState
responseBody(IE only)
responseText
responseXML
status

200 OK
404 not found
500 internal Server Error

statusText

用DOM而不是弹窗显示数据

 document.getElementById("price").value = xhr.responseText;

a标签，div标签，span标签等等只要我们给了id，都可以通过innerHTML修改其内容也即<span>标签之间的所有内容包括表示加粗的标签<b></b>也会被改掉。

Price: <span id="price"><b>to be determined</b></span>

9.上面这整个例子有点太简单化了，实际中我们要注意一些安全问题，也就是得到的数据要经过检验，看是否有危害，是否包含其他恶意js代码，当没有危害时我们才能将其注入到页面中。

同时获得多个数据

此时quote2.php打印了多个数据

<?  
/* 
 * quote2.php 
 * Outputs price, low, and high of given symbol as plain/text. 
 */  
// send MIME type  
header("Content-type: text/plain");  
// try to get quote  
$handle = @fopen("http://download.finance.yahoo.com/d/quotes.csv?s={$_GET['symbol']}&f=e1l1hg", "r");  
if ($handle !== FALSE)  
{  
	$data = fgetcsv($handle);  
	if ($data !== FALSE && $data[0] == "N/A")  
	{  
		print("Price: {$data[1]}\n");  
		print("High: {$data[2]}\n");  
		print("Low: {$data[3]}");  
	}  
	fclose($handle);  
}  
?>

如果不注明了换行，那么当注入到html页面中的时候不会换行，因此需要人为了的加入html的换行标签

if ($data !== FALSE && $data[0] == "N/A")  
{  
	print("Price: {$data[1]}");  
	print("<br />");  
	print("High: {$data[2]}");  
	print("<br />");  
	print("Low: {$data[3]}");  
}

添加等待指示

为了达到这个功能就需要处理XMLHttpRequest对象的不同状态。

var url = "quote4.php?symbol=" + document.getElementById("symbol").value;  
// inform user  在数据发送前就更改了提示。
document.getElementById("quote").innerHTML = "Looking up symbol...";

当然也可以不用单调的文字提示而是使用动态gif图片

aaarticlea/jpeg;base64,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">

方法就是首先在发送之前让图片块展示出来：

// show progress  
document.getElementById("progress").style.display = "block";  //none
//此处也发现了DOM的一大优点不但可以修改对象的html还可以修改元素的css样式  
// get quote

在获得返回数据时，再把图片所在块去除开：

function handler()  
{  
	// only handle requests in "loaded" state  
	if(xhr.readyState == 4)  
	{  
		// hide progress  
		document.getElementById("progress").style.display = "none";  
		if (xhr.status == 200)  
			document.getElementById("quote").innerHTML = xhr.responseText;  
		else  
			alert("Error with Ajax call!");  
	}  
}

progress在页面文件中是一个层div的id,在这个层中有gif图片

<div id="progress" style="display: none;">  
	<img alt="Please Wait" src="19-0.gif">  
	<br />
</div>

课堂上为了更好地演示这个显示gif图的效果，于是人为的在quote.php开头加入了一个延迟函数sleep(5).让其延迟5秒

通过XML方式来获得数据

收到来自yahoo的返回数据，加上在quote5中自己打印的根元素quote以及对应的XML子元素，整个返回数据效果如下：

<quote symbol="aapl">
    <price>304.18</price>
    <high>305.60</high>
    <low>302.20</low>
</quote>

//quote5.php  
<?   
	// set MIME type  
	header("Content-type: text/xml");   
	// output root element's start tag  
	print("<quote symbol='{$_GET['symbol']}'>");  
	// try to get quote  
	$handle = @fopen("http://download.finance.yahoo.com/d/quotes.csv?s={$_GET['symbol']}&f=e1l1hg", "r");  
	if($handle !== FALSE)  
	{  
		$data = fgetcsv($handle);  
		if ($data !== FALSE && $data[0] == "N/A")  
		{  
			print("<price>{$data[1]}</price>");  
			print("<high>{$data[2]}</high>");  
			print("<low>{$data[3]}</low>");  
		}  
		fclose($handle);  
	}  
	// output root element's end tag  
	print("</quote>");  
?>

function handler()  
{  
	// only handle requests in "loaded" state  
	if (xhr.readyState == 4)  
	{  
		if (xhr.status == 200)  
		{  
			// get XML  
			var xml = xhr.responseXML; //注意这里变为了XML  
			// update price  
			var prices = xml.getElementsByTagName("price");  
			if (prices.length == 1)  
			{  
				var price = prices[0].firstChild.nodeValue;  
				document.getElementById("price").innerHTML = price;  
			}  
			// update low  
			var lows = xml.getElementsByTagName("low");  
			if (lows.length == 1)  
			{  
				var low = lows[0].firstChild.nodeValue;  
				document.getElementById("low").innerHTML = low;  
			}  
			// update high  
			var highs = xml.getElementsByTagName("high");  
			if (highs.length == 1)  
			{  
				var high = highs[0].firstChild.nodeValue;  
				document.getElementById("high").innerHTML = high;  
			}
		}  
	else  
		alert("Error with Ajax call!");  
 	}  
}

对应的HTML页面代码中：

<body>  
Price: <span id="price"></span>  
 <br>  
 Low: <span id="low"></span>  
 <br>  
 High: <span id="high"></span>  
</body>

插入DOM元素

它请求的页面是quote1.php，它只会返回一条文本html数据（即只有一条信息，价格），所以在ajax9中用的还是responseText。

使用DOM方法创建新节点然后插入数据。在html页面中有

<div id="quotes"></div>

但数据并非直接插入这里，innerHTML未用于此div，而是我们在代码中创建了新div元素,，然后在此div中创建新文本节点。

下图是整个DOM的标签之间的关系图，new div和symbol:29.05（其中数字是请求返回的数据）就是我们自己创建的元素（标签），然后把symbol作为new div的子元素，最后再把new div作为div id=quote的子元素。可见通过DOM函数不仅可以修改已存在的元素还可以用于创建

function quote()  
{  
	// instantiate XMLHttpRequest object  
....  省略
 	// get symbol  
 	var symbol = document.getElementById("symbol").value;  
  	// construct URL  
  	var url = "quote1.php?symbol=" + symbol;  
  	// get quote  
  	xhr.onreadystatechange =  function(){   
  	// 这里让onreadystatechange等于匿名函数（没有名字的函数）,
  	//由于不需要用在别处只用在这里所以不需要名字xhr.onreadystatechange字段并不需要函数有名字  
  	// only handle loaded requests  
   	if (xhr.readyState == 4)  
    {  
		if (xhr.status == 200)  
		{  
      	// insert quote into DOM  
        	var div = document.createElement("div");  
      		var text = document.createTextNode(symbol + ": " + xhr.responseText);  
        	div.appendChild(text);  
      		document.getElementById("quotes").appendChild(div);  
    	}  
    else  
       alert("Error with Ajax call!");  
    }  
	}  
 xhr.open("GET", url, true);  
 xhr.send(null);  
}

JSON

XML不错，但使用起来还是有点麻烦，需要遍历树结构，这并不简洁。

它能序列化数据，比如一个二维数组，它能将其序列化为一串数据，也即一个一维数组。

JSON被大多数语言广泛支持，在PHP中通过内建的函数也能够简单创建JSON对象，比如说一个PHP数组可以轻松转化为JSON对象。

在PHP端，可以使用函数json_encode，传入一些变量比如数组（可以是关联数组或者二维数组），绝大多数PHP类型都能转为JSON然后发回到Ajax页面。

唯一有点麻烦的是js端需要使用eval函数，使用该函数需要注意安全，因为不管你取的什么text内容，然后你对它求值，js将像代码一样实际执行，会有安全问题。

使用了JSON后在本例子中获得的数据就是这么一串{price: 304.18, high: 305.60, low:302.20}，下面来看看实际产生这个数据的quote文件:

<?  
/* 
* quote6.php  
* Outputs price, low, and high of given symbol in JSON format. 
*/    
// set MIME type  
header("Content-type: application/json");  
// try to get quote  
$handle = @fopen("http://download.finance.yahoo.com/d/quotes.csv?s={$_GET['symbol']}&f=e1l1hg", "r");  
if ($handle !== FALSE)  
{  
	$data = fgetcsv($handle);  
	if ($data !== FALSE && $data[0] == "N/A")  
	{  
		if (is_numeric($data[1]))  
			$price = $data[1];  
		if (is_numeric($data[2]))  
			$high = $data[2];  
		if (is_numeric($data[3]))  
			$low = $data[3];  
	}  
	fclose($handle);  
}  
// output JSON  
print("{ price: $price, high: $high, low: $low }"); //直接输出原始JSON对象  
?>

优点在于在ajax10.html中可以发现获取JSON对象的值非常简单。

function quote()  
{  
	// instantiate XMLHttpRequest object  
... 省略
	// get symbol  
	var symbol = document.getElementById("symbol").value;  
	// construct URL  
	var url = "quote6.php?symbol=" + symbol;  
	// get quote  
	xhr.onreadystatechange =  
	function()  
	{  
		// only handle loaded requests  
		if (xhr.readyState == 4)  
		{  
			if (xhr.status == 200)  
			{  
				// evaluate JSON  
				var quote = eval("(" + xhr.responseText + ")"); 
				//周围加上括号表示它是对象，求值结束后quote变量就成为了对象，然后就可以向JSON对象那样处理它了  
				// show JSON in textarea  
				document.getElementById("code").value = xhr.responseText;  
				// insert quote into DOM  
				var div = document.createElement("div");  
				var text = document.createTextNode(symbol + ": " + quote.price); 
				//此处我只想取得price数据，因此quote.price，可见这个功能非常强大易用，
				//而不用如XML那样还得遍历整棵XML树，直接用点符号获取数据就行了。  
				div.appendChild(text);  
				document.getElementById("quotes").appendChild(div);  
			}  
			else  
				alert("Error with Ajax call!");  
		}  
	}  
	xhr.open("GET", url, true);  
	xhr.send(null);  
}

对应用到的html页面body标签中的子元素：

<div id="quotes"></div>  
<br> 
<textarea cols="80" id="code" rows="16">
</textarea>

最终获取数据效果如下图：

将php类转化为json

之前说过可以任意使用数据类型，这里在php中模仿JSON对象，建立了一个叫Stock的类，用到了json_encode函数

<?  
/*
* quote7.php 
* Outputs price, low, and high of given symbol in JSON format using PHP's JSON extension.
*/  
// defines a stock  
class Stock  
{  
	public $price;  
	public $high;  
	public $low;  
}  
// set MIME type  
header("Content-type: application/json"); //这个要注意，它的内容类型一定不要搞错了，要分清是JSON还是文本text还是XML  
// try to get quote  
$handle = @fopen("http://download.finance.yahoo.com/d/quotes.csv?s={$_GET['symbol']}&f=e1l1hg", "r");  
if ($handle !== FALSE)  
{  
	$data = fgetcsv($handle);  
	if ($data !== FALSE && $data[0] == "N/A")  
	{  
		$stock = new Stock();//创建一个新的stock实例  
		if (is_numeric($data[1]))  
			$stock->price = $data[1];  
		if (is_numeric($data[2]))  
			$stock->high = $data[2];  
		if (is_numeric($data[3]))  
			$stock->low = $data[3];  
	}  
	fclose($handle);  
}  
// output JSON  
print(json_encode($stock)); //json_encode将返回JSON编码后对象的字符串，不管是用于数组还是类都可以使用这个函数轻松应对  
?>

json_encode会在各个两边加上引号，这不用在意

使用了第三方框架YUI调用ajax

例子中是使用的YUI库来减少代码量并且能支持更多浏览器。

首先需要包含一些YUI js文件，然后和原来一样需要带上股票代码去连接quote7，然后告诉YUI执行异步请求，请求类型为get，传入URL，以及还有一个JSON对象，花括号表示JSON对象，键为success，值为handler。

这表示YUI中有这么个success字段，要求handler函数做些什么，这类似于前面讲过的onreadystatechange字段。

把handler函数传给它，所以状态值要改变，就会调用handler函数

这里handler函数中传入了一个对象参数o,其作用相当于前面的xhr，于是可以从quote7中得回responseText，并用eval求JSON对象的值

使用JQuery库调用ajax

总之使用第三方库能让Ajax请求变得更加容易。

<head>  
<script src="http://code.jquery.com/jquery-latest.js">
</script>  
<script>  
	$(document).ready(function() {  
		$("#form").submit(function() {  
		$.ajax({  
			url: "quote7.php",  
			data: {  
				symbol: $("#symbol").val()  
			},  
			success: function(data) {  
				$("#price").html(data.price);  
				$("#high").html(data.high);  
				$("#low").html(data.low);  
			}  
			});  
			return false;  
	});  
});    
</script>  
<title></title>  
</head>

使用google map中提供的api

因此可以将谷歌地图用到我们的应用中，在initialize函数中创建对象设定参数，myLatlng是一个经纬度变量。

myOptions是选项，可以确定缩放等级，zoom:8表示一般的缩放等级。

mapTypeId是地图类型，然后后面一句话是实例化一张地图给既存的div，可以在html页面代码部分看到这个div，而在css中可以设置这个div大小，让地图以合适尺寸显示到网页，这样你可以把地图显示在一边而不用占据整个页面。

从google maps API指南能查看到关于参数的信息。比如MapOptions. ，在课程项目中会把谷歌地图和BART提供的XML地铁数据整合起来做出一个实时地铁信息查询地图。

同理整合两个资源做出一个网站的还有通过谷歌地图和WiFi热点数据之间来整合起来做出查询附近wifi热点。这类整合两个以上资源的应用称作mashup（整合）

来自为知笔记(Wiz)

哈佛大学构建动态网站--第七讲ajax的更多相关文章

LNMP构建动态网站WordPress
LNMP构建动态网站wordpress 一.部署LNMP架构 1.安装nginx #配置nginx源 cat>/etc/yum.repos.d/nginx.repo<<-EOF [N ...
面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序
面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序 Ajax 为更好的 Web 应用程序铺平了道路在 Web 应用程序开发中,页面重载循环是最大的一个使用障碍,对于 Java™ ...
【鬼脸原创】github搭建动态网站
a{ color:blue; font-weight:bold; } #cnblogs_post_body ol li { list-style-type: cjk-ideographic; } p[ ...
day 72 Django基础七之Ajax
Django基础七之Ajax 本节目录一 Ajax简介二 Ajax使用三 Ajax请求设置csrf_token 四关于json 五补充一个SweetAlert插件(了解) 六同源策略与 ...
day 60 Django基础七之Ajax
Django基础七之Ajax 本节目录一 Ajax简介二 Ajax使用三 Ajax请求设置csrf_token 四关于json 五补充一个SweetAlert插件(了解) 六同源策 ...
Jenkins+Git+Gitlab+Ansible实现持续集成自动化部署动态网站（二）--技术流ken
项目前言在上一篇博客<Jenkins+Git+Gitlab+Ansible实现持续化集成一键部署静态网站(一)--技术流ken>中已经详细讲解了如何使用这四个工具来持续集成自动化部署一个 ...
Jenkins+Git+Gitlab+Ansible实现持续集成自动化部署动态网站(7)
项目前言在上一篇博客<Jenkins+Git+Gitlab+Ansible实现持续化集成一键部署静态网站(一)–技术流ken>中已经详细讲解了如何使用这四个工具来持续集成自动化部署一个静 ...
第20章使用LNMP架构部署动态网站环境
章节概述: 本章节将从Linux系统的软件安装方式讲起,带领读者分辨RPM软件包与源码安装的区别.并能够理解它们的优缺点. Nginx是一款相当优秀的用于部署动态网站的服务程序,Nginx具有不错的稳 ...
web系列教程之php 与mysql 动态网站。检索与更新。
接着上次WEb 系列开发之php 与mysql动态网站入门. 个人觉得,学习技术就像一棵大树,主干很重要,枝叶其次.对于学习技术,我们应该分清主次关系.怎么学?为什么要学?有一个较好的分寸. 有时候觉 ...

随机推荐

Python os.path模板函数
os.path.abspath(path) #返回绝对路径 os.path.basename(path) #返回文件名 os.path.commonprefix(list) #返回list(多个路径) ...
hdu1002
//c//https://github.com/ssdutyuyang199401/hduacm/blob/master/1002.c#include<stdio.h>#include&l ...
cocoaPods使用
1更新版本:pod repo update 有时太老的gem版本,搜索不到最新SDK库特殊情况下,由于网络或者别的原因,通过 CocoaPods 下载的文件可能会有问题. 这时候您可以删除 Coco ...
【Unity】Unity中C#与Android中Java的互相调用遇到的一些问题
1.有关调用的一些问题: (1).在C#中直接调用java中的代码,无返回值: 在java中: public static void setAge(Context context , int leve ...
(sql占位符)Remember that ordinal parameters are 1-based!
第一次出现是将第一个问号(?)的位置设为1了,其实是从0开始的. 第二次出现是 sql中的问号写成了中文输入法下的问号,这个太难发现了,搞了半天才发现.然后改成英式问号就可以了. 每天进步一点 ...
post请求和get请求
get请求在链接后面带参数,容易出现乱码,是坑(慎用),有固定的长度一般的用的就是post方式 <form action="<%=basePath%>upload&quo ...
geom设置—折线图
折线图在R中也是很常见的一种图形,相对而言也比较简单. geom_line(mapping = NULL, data = NULL, stat = "identity", posi ...
poj_1743_Musical Theme(后缀数组)
题目链接:poj_1743_Musical Theme 题意: 给你一串数字,让你找最长的变化相同不重叠的子串,至少长度为5 题解: 处理数据后用后缀数组加二分答案,然后用height数组check答 ...
单尺度二维离散小波分解dwt2
clc,clear all,close all; load woman; [cA,cH,cV,cD]=dwt2(X,'haar');%单尺度二维离散小波分解.分解小波函数haar figure,ims ...
Hibernate配置文件的hbm2ddl.auto属性
今天遇到一个有意思的问题,我目前做的一个网站采用Spring MVC + Spring + Hibernate的架构,我通过页面插入了一些数据到数据库,可是每次重启tomcat之后,数据都莫名其妙地丢 ...

哈佛大学构建动态网站--第七讲ajax