AJAX学习笔记
1、没有AJAX的网页和拥有AJAX网页的页面。
举个例子。没有AJAX时，填写完表单，提交给服务器，服务器会检查每一项填写是否正确，如果不正确，会要求用户改正。在发送给服务器，服务器接收并做出响应再发还给客户端，这所需的时间有可能很长，这样会造成时间的浪费。
如果有了AJAX，每一项数据填写完毕后，会立即发送至服务器检查是否正确，与此同时用户可以继续填写其他数据，因此会节省很多时间。我们填写完一项数据后表单右侧会出现√或者X，就是AJAX发挥作用的结果。
可以做到异步操作，是因为出现了一个对象XMLHttpRequest，可对网页进行部分更新。
2.XMLHttpRequest
var request; if(window.XMLHttpRequest) { request=new XMLHttpRequest();//适用于chrome、Firefox等主流浏览器。 } else {request=new Active Object("Microsoft.XMLHTTP")};
3.HTTP请求
（1）GET请求和POST请求的区别
GET请求：一般用于信息获取；使用URL传递参数（因此对任何人都可见，不安全）；发送信息数量有所限制，一般是2000字符以内。
POST请求：一般用于修改服务器上的资源；发送信息数量没有限制。
4.XMLHttpRequest发送请求
两个基本函数。
open(method,URL,async);//method有“POST”和"GET"两种。async表示选用同步还是异步传输，默认是异步(true)。 send(string);//method为"GET"时，可以为空；如果为"POST"，最好不要为空，因为要传输数据。
5.XMLHttpRequest取得响应
request.onreadystatechange = function() { if (request.readyState === 4 && request.status === 200) { //处理request.responseText //readyState属性的意思： 0:请求未初始化，open还没有调用 1:服务器连接已经建立，open已经调用 2:请求已经被接收，接收到请求头信息 3:请求处理中，接收到请求体信息 4:请求已完成，并且响应已经就绪完成 //request.status = 200表示连接成功 } }
6.JSON
（1）为什么要引入JSON：连接成功有返回值后，有可能出现诸如无查询结果返回的错误。如果发送给前端的文字发生了改变，那么前端原先为了判断错误类型而写的代码也要做出改变，这样比较麻烦。因此引入JSON，这样只需在后端改变。
（2）JSON是存储和交换信息的语法，类似于XML，独立于语言，只要按照JSON的语法就行。
（3）JSON的格式：{"name":"张三","age":"20"}
（4）在JavaScript里解析JSON的两种方法：eval和JSON.parse。后者较前者来得安全，因为前者会执行JSON字符串的方法，后者碰到这情况，就弹出错误提醒（字符串不合法）。
（5）需要自行约定JSON数据的格式，在后台文件(.php)和前台文件(.html)修改JSON格式。
<?php
if(...) echo "{'success':'false','msg':'没有找到。'}"; else echo "{'success':'true','msg':'.....'}";
?>
<script>
var data=JSON.parse(responseText); if(data.success) document.getElementById("...").innerHTML=data.msg; else document.getElementById("...").innerHTML="出现错误："+data.msg;
<script>
下面是ajax使用方法举例。
前端使用jQuery和ajax结合。
前端代码：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>learning</title> <script src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <input type="text" id="text"/> <button id="sub">submit</button> <p id="re"></p> <script> $("#sub").click(function () { $.ajax({ type: "GET", url:"test3.php?number=" +$("#text").val(), dataType:"json", success:function (data) { if (data.success) { $("#re").html(data.msg); } else { $("#re").html("出现错误" + data.msg); } }, error:function (jqXHR) { alert("发生错误" + jqXHR.status); } }); }); </script> </body> </html>
后端使用PHP语言，代码：
<?php //设置页面内容是html编码格式是utf-8 //header("Content-Type: text/plain;charset=utf-8"); header('Access-Control-Allow-Origin:*'); header('Access-Control-Allow-Methods:POST,GET'); header('Access-Control-Allow-Credentials:true'); header("Content-Type: application/json;charset=utf-8"); //header("Content-Type: text/xml;charset=utf-8"); //header("Content-Type: text/html;charset=utf-8"); //header("Content-Type: application/javascript;charset=utf-8"); //定义一个多维数组，包含员工的信息，每条员工信息为一个数组 $staff = array ( array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"), array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"), array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理") ); //判断如果是get请求，则进行搜索；如果是POST请求，则进行新建 //$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字 //$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法 if ($_SERVER["REQUEST_METHOD"] == "GET") { search(); } //通过员工编号搜索员工 function search(){ //检查是否有员工编号的参数 //isset检测变量是否设置；empty判断值为否为空 //超全局变量 $_GET 和 $_POST 用于收集表单数据 if (!isset($_GET["number"]) || empty($_GET["number"])) { echo '{"success":false,"msg":"参数错误"}'; return; } //函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。 //global 关键词用于访问函数内的全局变量 global $staff; //获取number参数 $number = $_GET["number"]; $result = '{"success":false,"msg":"没有找到员工。"}'; //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果 foreach ($staff as $value) { if ($value["number"] == $number) { $result = '{"success":true,"msg":"找到员工：员工编号：' . $value["number"] . '，员工姓名：' . $value["name"] . '，员工性别：' . $value["sex"] . '，员工职位：' . $value["job"] . '"}'; break; } } echo $result; } ?>
如果前端不要jQuery而用JavaScript的话，代码：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Demo</title> <style> body, input, select, button, h1 { font-size: 28px; line-height:1.7; } </style> </head> <body> <h1>员工查询</h1> <label>请输入员工编号：</label> <input type="text" id="keyword" /> <button id="search">查询</button> <p id="searchResult"></p> <h1>员工新建</h1> <label>请输入员工姓名：</label> <input type="text" id="staffName" /><br> <label>请输入员工编号：</label> <input type="text" id="staffNumber" /><br> <label>请选择员工性别：</label> <select id="staffSex"> <option>女</option> <option>男</option> </select><br> <label>请输入员工职位：</label> <input type="text" id="staffJob" /><br> <button id="save">保存</button> <p id="createResult"></p> <script> document.getElementById("search").onclick = function() { var request = new XMLHttpRequest(); request.open("GET", "serverjson.php?number=" + document.getElementById("keyword").value); request.send(); request.onreadystatechange = function() { if (request.readyState===4) { if (request.status===200) { var data = JSON.parse(request.responseText); if (data.success) { document.getElementById("searchResult").innerHTML = data.msg; } else { document.getElementById("searchResult").innerHTML = "出现错误：" + data.msg; } } else { alert("发生错误：" + request.status); } } } } document.getElementById("save").onclick = function() { var request = new XMLHttpRequest(); request.open("POST", "serverjson.php"); var data = "name=" + document.getElementById("staffName").value + "&number=" + document.getElementById("staffNumber").value + "&sex=" + document.getElementById("staffSex").value + "&job=" + document.getElementById("staffJob").value; request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); request.send(data); request.onreadystatechange = function() { if (request.readyState===4) { if (request.status===200) { var data = JSON.parse(request.responseText); if (data.success) { document.getElementById("createResult").innerHTML = data.msg; } else { document.getElementById("createResult").innerHTML = "出现错误：" + data.msg; } } else { alert("发生错误：" + request.status); } } } } </script> </body> </html>