前端笔记-ajax
零：什么是ajax？
缩写的意思是： Asynchronous JavaScript and XML （异步的 JavaScript 和 XML）。
前端页面在不重新加载整个页面的情况下，与服务器交换数据并更新部分内容的方法，不需要插件但是需要用户允许js在浏览器运行。
工作原理：
AJAX是基于现有的Internet标准，并且联合使用它们：
XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)
* AJAX应用程序与浏览器和平台无关的！
一：AJAX应用
演示代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc(){
var xmlhttp;
if(window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('myDiv').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","log/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
1.1XMLHttpRequest 是ajax的基础
现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象.
可以使用如下语法建立对象：
variable=new XMLHttpRequest();
老版本IE要使用ActiveX对象
variable=new ActiveXObject("Microsoft.XMLHTTP");
1.2 发送请求
XMLHttpRequest 对象的open（）和send（）方法
方法描述
open(method,url,async)method：请求的类型
url：文件在服务器的位置
async：true（异步）、false（同步）
send(string)发送到服务器：
string：仅用于post请求
注：url / 文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）
1.3 GET 还是 POST？
get比post更快，更简单，在大部分情况下都能用。
在以下情况下用post：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据
发送包含未知字符的用户输入
例子：
get:
请向 URL 添加一个唯一的 ID：
xmlhttp.open("GET","/xxx/yyy/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
通过 GET 方法发送信息，请向 URL 添加信息：
xmlhttp.open("GET","/xxx/yyy/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
post:
简单：
xmlhttp.open("POST","/xxx/yyy//demo_post.php",true);
xmlhttp.send();
若像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","/xxx/yyy//demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
1.4 同步还是异步
async=true 时为异步，推荐使用，无需等待服务器响应，而是可以执行其他脚本，当响应完成后进行处理。
async=false 时为同步，不推荐使用，但是对于一些小型的请求，也可以用，但是JavaScript 会等到 服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
当您使用 async=false 时，请不要编写在 onreadystatechange 函数中， 把代码放到 send() 语句后面即可：
xmlhttp.open("GET","/xxx/yyy/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
二：服务器响应
获得来自服务器的响应：
属性描述
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。
三：onreadystatechange 事件
3.1当请求被发送到服务器是，需要执行一些基于响应的任务。readyState属性存有XMLHttpRequest的状态信息，当其改变是就会触发onreadystatechange 事件。
XMLHttpRequest 对象的三个重要的属性：
属性描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState从 0 到 4 发生变化。
0: 请求未初始化（还没有调用 open()）
1: 请求已经建立，但是还没有发送（还没有调用 send()）
2:请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3: 请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4: 响应已完成；您可以获取并使用服务器的响应了。
status200: "OK"
404: 未找到页面
例子：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
3.2 使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数。
如果网站上存在多个 AJAX 任务，那么应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
showHint() 函数
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
...
xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
xmlhttp.send();
}
如果输入框为空 str.length==0 ，则这函数清空 txtHint 占位符的内容，并退出函数。
如果不为空，则执行：
创建XMLHttpRequest 对象
当服务器响应就绪就执行函数
把请求发到服务器上文件gethint.php，URL 添加了一个参数 q （带有输入框的内容）
四： Database 交互实例
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
。。。
xmlhttp.open("GET","try/getcustomer.php?q="+str,true);
xmlhttp.send();
}
showCustomer() 函数执行以下任务：
检查是否已选择某个客户
创建 XMLHttpRequest 对象
当服务器响应就绪就执行创建的函数
把请求发送到服务器，带q参数
注意：本机测试，要将网页发布：
1.放到某台服务器，启动tomcat
2.本机发布，windows系统的话，启动IIS，将网站发布。
