1.什么是Ajax？
是一种创建灵活，交互性强的Web技术，利用其可以实现响应迅速，无刷新的Web应用。Ajax是JavaScript，XML，CSS，DOM等多种技术的组合，Ajax是客户端技术，其编译和执行由浏览器执行。Ajax可以实现在不需要刷新页面的情况下与服务器进行通信，从而减少用户等待的时间，是一种通过javascript可以调用后台服务器获得数据的客户端技术。
Ajax可以把一部分由服务器负担的工作转移到客户端，利用客户端的资源进行处理，减轻服务器负担。
2.Ajax技术组成。
Ajax的最核心的技术是XMLHttpRequest对象，它是一个具有应用程序接口的javascript对象，可以使用http协议连接服务器，通过XMLHttpRequest,Ajax可以像桌面应用程序一样，只向服务器进行数据层面的交换，而不用刷新整个页面。
XMLHttpRequest对象在发送请求和处理请求之前，必须要初始化该对象。由于XMLHttpRequest不是一个W3C标准，对于不同服务器有不同的初始化方法。根据浏览器的不同，可以分为两种（IE与非IE）。为了实现程序的兼容性，可以使用下面的代码初始化XMLHttpRequest对象。
<script language="JavaScript">
var http_request;
if(window.XMLHttpRequest){
http_request = new XMLHttpRequest();
}else if(window.ActiveXObject){
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>
XMLHttpRequest对象的常用方法
（1）open(method,url,asynFlag)
该方法向指定的url发送请求。
method请求类型 POST或者GET
URL 请求的地址
aysnFlag 请求的方式，同步为true,异步则为false 默认是true
（2）send(content)
该方法向服务器发送请求，如果声明为异步，则该方法立即返回，否则将等待接收到响应为止。
content用于指定发送的数据。
（3）setRequestHeader(label,value) 设置HTTP头设置值，必须在open()方法之后才能调用
(4)abort() 停止当前异步请求
（5）getAllResponseHeaders()
以字符串的形式返回完整的HTTP头信息
XMLHttpRequest对象常用的属性值
onreadystateChange 每次状态改变都会触发这个事件处理器，通常会调用一个javascript函数
readyState(请求的状态 可以取五个值 0未初始化，1正在加载，2已加载，3交互中，4完成)
responseText 服务器的响应，表示为字符串
responseXML 服务器的响应，表示为XML
status(返回服务器的状态码，200成功，202请求被接受，400错误的请求，404文件未被找到，500内部服务器错误)
statusText(返回HTTP状态码对应的文本)
XMLHttpRequest对象与服务器交互一般经历以下三个步骤
- 初始化XMLHttpRequest对象
- 设置请求状态和返回处理函数
- 发送HTTP请求
下面通过一个小例子来说明以下，我们通过XMLHttpRequest对象来请求一个html文件的内容。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
var xmlhttp;
function createXMLhttp() {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if(xmlhttp){
//alert("xmlhttp created");
}else{
xmlhttp = false;
//alert("xmlhttp not created");
}
return xmlhttp;
}
function ReqHtml(){
createXMLhttp();
xmlhttp.onreadystatechange = StatHandler;
xmlhttp.open("GET","text.html",true);
xmlhttp.send(null);
}
function StatHandler(){
if(xmlhttp.readyState == 0 ){
//alert("1");
}
if(xmlhttp.readyState == 1 ){
//alert("2");
}
if(xmlhttp.readyState == 3){
//alert("3");
}
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
//alert(xmlhttp.status);
document.getElementById("webpage").innerHTML = xmlhttp.responseText;
}
}
</script>
</head>
<body>
<a href="#" onclick="ReqHtml();">通过XMLHttpRequest对象请求html文件</a>
<div id="webpage"></div>
</body>
html文件的内容很简单 只有一个字符串 hello world这里不再给出，当点击超链接的时候，出现hello world
3.Ajax如何与PHP交互
主要有两种方式 get 和 post
(1)get
当向url传递参数的时候，应该直接加在open方法的url的后面。
例如
xmlhttp.open("GET","searchrst.php?cont="+cont,true);
下面我们通过XMLHttpRequest对象向后台服务器请求数据并且显示出来。关键代码如下
/*conn.php*/
<?php
$mysqli = new mysqli("localhost","root","123456","mydb") or die("数据库连接失败!".$mysqli->errno);
/*index.html*/
function showresult(){
createXMLhttp();//初始化XMLHttpRequest对象
var cont = document.getElementById("searchtxt").value;//获取表单的值
xmlhttp.onreadystatechange = StatHandler;//设置回调函数
xmlhttp.open("GET","searchrst.php?cont="+cont,true);//通过get方法向传参数
xmlhttp.send(null);
}
function StatHandler(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("webpage").innerHTML = xmlhttp.responseText;
}
}
/*表单部分*/
<form name="searchform" id="searchform" method="get" action="#">
<label for="searchtxt">请输入关键字</label>
<input name="searchtxt" id="searchtxt" type="text">
<input type="button" value="查询" onclick="showresult()">
</form>
<div id="webpage"></div> <!-- 这里会显示向数据库查询的结果-->
/*searchtxt.php*/
<?php
header("Content-type:text/html;charset=utf-8");
include_once("conn/conn.php");
$cont = $_GET["cont"];
$res = $mysqli->query("select * from mytb where id=".$cont);
if($row = $res->fetch_assoc()){
echo $row["name"];/*reponseText的值*/
}
（2）post
当向url传递参数的时候，应该使用XMLHttpRequest的send()方法。
例如传递username为tom ,password为123456应该使用
var post_method = "username="+username+"&password"+password;
xmlhttp.open("POST","searchtxt.php",true);
xmlhttp.onreadystatechange=StatHandler;
xmlhttp.send(post_method);/*传递的参数*/
实现上面同样功能的代码如下
/index.html/
function showresult(){
createXMLhttp();
var cont = document.getElementById("searchtxt").value;
//alert(cont);
var value = "cont=" + cont; //注意 javascript使用加号连接字符串的，一开始用的.,调了很久
//alert(value);
xmlhttp.onreadystatechange = StatHandler;//下面两行代码不能丢 如果使用post传递数据的话，
//设置content-type的值为application/x-www-form-urlencoded
xmlhttp.open("POST","searchrst.php",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
xmlhttp.send(value);//发送url参数
}
function StatHandler(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
alert("ok");
document.getElementById("webpage").innerHTML = xmlhttp.responseText;
}
}
<form name="searchform" id="searchform" method="post" action="#"><!--这里需要改-->
<label for="searchtxt">请输入关键字</label>
<input name="searchtxt" id="searchtxt" type="text">
<input type="button" value="查询" onclick="showresult()"><!--这里是button，不是submit-->
</form>
<div id="webpage"></div>
/*searchtxt.php*/
<?php
header("Content-type:text/html;charset=utf-8");
include_once("conn/conn.php");
$cont = $_POST["cont"]; /*由于使用post方法进行交互，这里需要改为$_POST*/
$res = $mysqli->query("select * from mytb where id=".$cont);
if($row = $res->fetch_assoc()){
echo $row["name"];//reponseText
}
4.Ajax的缺点
由于Ajax主要依赖于XMLHttpRequest对象，由于XMLHttpRequest对象的实例在处理完事件之后就会被销毁，如果不进行封装处理，下次需要使用该对象时还需要重新构建，每次调用都要写一大段代码，使用起来很不方便。
解决办法：可以使用开源的Ajax框架，很多开源Ajax框架都对XMLHttpRequest对象进行了封装，比如JQuery。使用JQuery可以使用简单的几行代码实现非常复杂的交互。关于JQuery的使用方法，可以自行查找资料学习。这里不再赘述。