慕课：ajax学习笔记

1-1 AJAX简介
AJAX的全称：Asynchronous JavaScript and XML（异步的JavaScript 和 XML）
Ajax不是编程语言，是一种在无需重新加载整个网页的情况之下能够更新部分网页的技术。
传统的网页在不使用AJAX技术时，如果想要更新内容或者提交一个表单，就要重新载入页面。
使用了AJAX技术的网页，可以通过在后台跟服务器进行少量的数据交换，网页就可以实现异步局部更新。

2-1 同步与异步
同步请求的状态图：

异步请求的状态图：

同步的世界里缺少一个对象为 XMLHttpRequest

XMLHttpRequest对象可以在不需要重新加载整个页面的前提下进行后台与服务器之间进行交换数据，可以对网页进行部分更新。

怎样实现ajax技术呢？
①运用HTML和CSS来实现页面，表达信息；
②运用XMLHttpRequest和web服务器进行数据的异步交换；
③运用Javascript操作DOM，实现动态局部刷新。

2-2 XMLHttpRequest对象创建
大多数浏览器都兼容，但是ie6以前版本不兼容。
创建对象

var request;
if(window.XMLHttpRequest){
    request = new XMLHttpRequest();//IE7+,Firefox,chrome,opera,safari...
}
else{
    request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
}

2-3 HTTP请求
1.什么是HTTP？
http是计算机通过网络进行通信的规则。
使浏览器能够从服务器请求信息和服务。
HTTP是一种无状态协议：不建立持久的连接。服务端不保留连接的相关信息。
一个客户端向服务器发出请求，服务器返回响应，然后连接即被关闭。这个处理过程是没有被记忆的。

2.HTTP请求
一个完成的HTTP请求过程，通常有下面7个步骤：
①建立TCP连接。
②web浏览器向web服务器发送请求命令。
③web浏览器发送请求头信息
④web服务器应答。
⑤web服务器发送应答头信息。
⑥web服务器向浏览器发送数据。
⑦web服务器关闭TCP连接。

一个HTTP请求一般由四部分组成：
①HTTP请求的方法或动作，比如是GET还是POST请求。
②正在请求的url，即请求的地址。
③请求头，包含一些客户端环境信息，身份验证信息等。
④请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等。
注意：一般请求头和请求体之间有一行空行，很重要，表示请求头已经结束，接下来的内容就是请求体。
示例：
一个http请求内容：

上图为GET方法，login.php是请求的地址。这里只是例子。实际上用get方法发送用户名和密码是很不安全的。

3.对比GET方法和POST方法：
GET：一般用于信息获取。
使用url传递参数
对所发送信息的数量也有限制，一般在2000个字符左右。
该方法发送的信息对任何人都是可见的。所有的变量名和值都显示在url中。也就是说get请求是用url来传递参数的。
GET请求是幂等的。get请求一次和请求一万次的效果是一样的。不会因为查询次数的多少而改变数据信息。
POST：一般用于修改服务器上的资源。
对所发送信息的数量无限制。
一般用来从表单进行发送数据。数据不再url中显示。所有的变量和值对别人不可见，而是嵌入到请求体中。
还可参见：
http://www.cnblogs.com/jtome/archive/2008/12/04/1347864.html

4.一个HTTP响应一般由三个部分组成：
①一个数字和文字组成的状态码，用来显示请求是成功还是失败。
②响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等。
③响应体，也就是响应正文。字符串或html代码等。
示例：
一个响应的内容

5.响应的状态码
HTTP状态码由3位数字构成，其中首位数字定义了状态码的类型：
1XX：信息类，表示收到web浏览器请求，正在进一步的处理中。
2XX：成功，表示用户请求被正确接收，理解和处理例如：200 OK
3XX：重定向，表示请求没有成功，客户必须采取进一步的动作。
4XX：客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found，意味着请求中所引用的文档不存在。

http://www.cnblogs.com/li0803/archive/2008/11/03/1324746.html

2-4 XMLHttpRequest发送请求
XMLHttpRequest对象有两个方法，这些方法能将请求发送到服务器上。
①open(method,url,async)方法用于调用http请求。
第一个参数method是发送请求的方法。
第二个参数url是请求的地址，可以是相对的地址，也可以是绝对的地址。
第三个参数async代表请求是同步/异步。同步为false，异步为true。默认值为true，所以用ajax做异步传输，一般就不用填写了。
②send(string)方法用于把请求发送到服务器上。
当使用get方法请求时，因为参数都写在了url中，所以send的参数可以不填写，也可以写成none。
当使用post请求时，就一定要填写参数了。

例一：

request.open("GET","get.php",true);
request.send();

例二：

request.open("POST","create.php",true);
request.setRequsetHeader("Content-type","application/x-www-form-urlencoded");//必须写在open和send之间
request.send("name=李明&sex=男");

2-5 XMLHttpRequest 取得响应
服务器给出的响应我们如何获取呢？
通过XMLHttpRequest的方法或者属性来获取。
①resposeText：获得字符串形式的响应数据。
②resposeXML：获得XML形式的响应数据。
（现在使用XML进行交互的比较少，一般都用json的方式。）
③status和statusText：以数字和文本形式返回http状态码。（status仅返回数值的响应码，而不是像.statusText那样返回整个HTTP响应）
④getAllResponseHeader()：获取所有的响应报头
⑤getResponseHeader()：查询响应中的某个字段的值

监听readyState属性可以知道服务器的响应变化。
0：请求未初始化，open还没有调用。
1：服务器连接已建立，open已经调用了。
2：请求已接收，也就是接收到头信息了。
3：请求处理中，也就是接收到响应主体了。
4：请求已完成，且响应已就绪，也就是响应完成了。

var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
requset.onreadystatechange = function(){
if(request.readyState===4&&request.status===200){
//做一些事情 request.responseText
}
}

3-1 做个小例子
例子简介
使用纯html页面，用来实现员工查询和新建的页面。
使用php页面，用来实现查询员工和新建员工的后台接口。
要求：
1.查询员工信息，可以通过输入员工编号查询员工基本信息；
2.新建员工信息，包含员工姓名，员工编号，员工性别，员工职位。

介绍下php:
php是一种创建动态交互性站点的服务器端脚本语言。php能够生成动态页面内容，能够创建、打开、读取、写入、删除以及关闭服务器上的文件。能够接收表单数据并处理，能够发送并取回cookies.能够添加、删除、修改数据库中的数据。能够限制用户访问网站中的某些页面。对数据进行加密解密等···兼容所有的web服务器，比如apache,IIS等。支持几乎所有的数据库，比如mySOL,Oracle,SQLserver等。
服务器端脚本语言包括：php，java，.net等。
php脚本

<?php...xxx...?>

php文件的默认文件扩展名是.php
php语句以分号结尾（;）

在本地部署服务器进行测试：
使用一款功能强大的集成软件包XAMMP，运行php，它包含了web服务器，Apache，mysql数据库，php语言支持。
下载地址：https://www.apachefriends.org/download.html
在Dreamweaver中配置web服务器用于本地测试。

3-2 服务器端实现
XAMMP安装很简单，直接下一步下一步的安装就可以了。
Dreamweaver本身支持XAMMP的配置。
首先，启动XAMMP。在安装XAMMP的文件夹中找到xammp-control.exe打开。把其中的Apache开始start。（Apache的配置文件可以在config下的httpd.conf进行修改。如果你的80端口没有被占用则不需要修改，如果已占用则将其中的Listien 80改为Listien8080，然后保存，再次启动Apache的start。）

其次，打开本地浏览器，在浏览器中输入localhost。（如果你使用的是8080端口，则输入localhost:8080）会看到xammp的示例页面，说明安装完成，服务器启动完成。

再次，在dreamweaver上新建个站点。
【站点名】可为AjaxDemo，本地站点文件夹：在安装xammp的文件里，比如C:\xampp\htdocs里面新建一个文件夹名为ajaxdemo
【服务器】点击左下角的+，新建一个服务器。服务器名称为xammp，连接方法选择本地网络，服务器文件夹选择刚才的文件夹C:\xampp\htdocs\ajaxdemo\，webURL写http://localhost/ajaxdemo/，（如果是用的8080端口则为http://localhost:8080/ajaxdemo/）。在“高级”选项里，服务器模型选择PHP MySQL。点击保存。去掉“远程”的勾选，改成“测试”的勾选。点击保存。这样这个站点就建好了。

在站点里新建一个php文件，命名为text.php。代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<h1>这是一个测试页面
<?php 
echo "Hello World!"
?>
</h1>
</body>
</html>

可以F12进行预览，也可以在浏览器中输入http://localhost/ajaxdemo/text.php 进行预览。页面显示：这是一个测试页面Hello World!
以上说明测试成功。
在ajaxdemo文件夹里新建server.php文件（用于写接口）。代码如下

<?php
//设置页面内容是html编码格式是utf-8
header("Content-Type: text/plain;charset=utf-8"); 
//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"); 告诉客户端本服务器响应的格式是什么。text/plain;代表格式是纯文本。application/json;代表格式是字符串。以此类推。

//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$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();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
 create();
}

//通过员工编号搜索员工
function search(){
//检查是否有员工编号的参数
//isset检测变量是否设置；empty判断值为否为空
//超全局变量 $_GET 和 $_POST 用于收集表单数据
if (!isset($_GET["number"]) || empty($_GET["number"])) {
echo "参数错误";
return;
 }
//函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
//global 关键词用于访问函数内的全局变量
global $staff;
//获取number参数
$number = $_GET["number"];
$result = "没有找到员工。";

//遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
foreach ($staff as $value) {
if ($value["number"] == $number) {
$result = "找到员工：员工编号：" . $value["number"] . "，员工姓名：" . $value["name"] . 
"，员工性别：" . $value["sex"] . "，员工职位：" . $value["job"];
break;
 }
 }
echo $result;
}

//创建员工
function create(){
//判断信息是否填写完全
if (!isset($_POST["name"]) || empty($_POST["name"])
 || !isset($_POST["number"]) || empty($_POST["number"])
 || !isset($_POST["sex"]) || empty($_POST["sex"])
 || !isset($_POST["job"]) || empty($_POST["job"])) {
echo "参数错误，员工信息填写不全";
return;
 }
//TODO: 获取POST表单数据并保存到数据库

//提示保存成功
echo "员工：" . $_POST["name"] . " 信息保存成功！";
}

预览地址为http://localhost/ajaxdemo/server.php

3-3 PHP服务器代码测试
在没有客户端的时候先对服务端的请求进行测试。
这里需要测试server.php的代码是否正确。
使用工具fiddler调试服务器端代码，可以监听整个电脑所有发出的http请求，传入的值以及响应回来的值。同时也可以模拟客户端发送与接收。
安装fiddler（百度即可），据说需要安装.net framework，我是安装了。
打开fiddler，点击右边的composer，在地址栏输入刚才的地址http://localhost/ajaxdemo/server.php，点击按钮Execute
左边就会出现记录，双击该记录。在右边能看见返回值Textview为“参数错误”。
在composer的url里面重新输入http://localhost/ajaxdemo/server.php?number=1 点击 Execute 运行
左边就会出现记录，双击该记录。在右边能看见返回值Textview为“没有找到员工”。
在composer的url里面重新输入http://localhost/ajaxdemo/server.php?number=101 点击 Execute 运行
左边就会出现记录，双击该记录。在右边能看见返回值Textview为“找到员工：员工编号：101，员工姓名：洪七，员工性别：男，员工职位：总经理”。
同样，当number=2时，返回值为“找到员工：员工编号：102，员工姓名：郭靖，员工性别：男，员工职位：开发工程师”。
由此可知，我们服务器端的get请求写的是正确的。

接下来验证下post请求。同样在fiddler里面的composer–parsed里面下拉get改成post，url为http://localhost/ajaxdemo/server.php
然后在下面输入Content-Type:application/x-www-form-urlencoded。来告诉服务器这是个post请求，请求的内容是用这种url的方式发送过来的。

点击 Execute 运行
双击左侧的状态条，右边显示返回值为参数错误，员工信息填写不全。
当然会信息不全了，因为我们根本没有写添加的信息！
重新点击composer，在request body里面输入

name=欧阳锋&number=104&sex=男&job=测试经理

点击 Execute 运行
左边就会出现记录，双击该记录。在右边能看见

说明信息写入成功。
由此可知，我们服务器端的post请求写的是正确的。

3-4客户端实现

新建一个html页面，名为demo.html与sever.php放在同一个文件夹里。
这个页面有两个内容，一个是员工查询，一个是员工新建。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
*{
font-size:20px;
line-height:1.2;
}
</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>
<!--创建xhr对象，发送异步请求，监听服务器的响应结果，将结果呈现在页面上-->
<script>
<!--get请求-->
document.getElementById("search").onclick=function(){
//发送Ajax查询请求并处理
var request = new XMLHttpRequest();
 request.open("GET","server.php?number="+document.getElementById("keyword").value);
 request.send();
//显示查询结果
//监听服务器上readystate属性，当xhr的readystate属性值为4时，说明服务器的请求已经结束。如果status值为200则显示服务器响应的报文。如果status值不是200则弹窗提示显示错误。
 request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status === 200){
 document.getElementById("searchResult").innerHTML= request.responseText;
 }
else{
 alert("发生错误："+request.status);
 }
 }
 }
 }

<!--post请求-->
document.getElementById("save").onclick=function(){
//发送Ajax请求并处理
var request = new XMLHttpRequest();
 request.open("POST","server.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);
//显示查询结果
//监听服务器上readystate属性，当xhr的readystate属性值为4时，说明服务器的请求已经结束。如果status值为200则显示服务器响应的报文。如果status值不是200则弹窗提示显示错误。
 request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status === 200){
 document.getElementById("createResult").innerHTML= request.responseText;
 }
else{
 alert("发生错误："+request.status);
 }
 }
 }
 }

</script>
</body>
</html>

4-1 json基本概念
JSON：Javascript 对象表示法（Javascript Object Notation）
JSON是存储和交换文本信息的语法，类似XML，它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成。
JSON是独立于语言的，也就是说不管什么语言，都可以解析json，只需要按照json的规则来就行。
JSON与XML比较
json的长度和xml格式比起来很短小。
json读写的速度更快
json可以使用javascript内建的方法直接进行解析，转换成javascript对象，非常方便。
JSON语法规则
JSON数据的书写格式是：名称/值对。
名称/值对组合中的名称写在前面（在双引号中），值对写在后面（同样写在双引号中），中间用冒号隔开：
例如”name”:”郭靖”
json的值可以是下面这些类型：
数字（整数或浮点数），比如123，1.23
字符串（在双引号中）
逻辑值（true或false）
数组（在方括号中）
对象（在花括号中）
null

例子json字符串：

{
    "staff":[
 {"name":"洪七","age":70},
 {"name":"郭靖","age":35},
 {"name":"黄蓉","age":30}
 ]
}

4-2 json解析、格式化和校验工具
json格式如何在js中解析？
在js中解析json有两种方式：eval和JSON.parse。
eval不仅解析了json字符串，还执行了json字符串中的js方法。eval不会判断json字符串是否合法，JSON.parse则会判断。所以使用eval方式是非常危险的，一般使用JSON.parse方式。
使用两种方式的示例：

在线的json校验工具：jsonlint.com
能够校验出json字符串中的语法错误。

把第2节的案例进行修改，改成由json格式进行数据传输。
服务端php

<?php
//设置页面内容是html编码格式是utf-8
//header("Content-Type: text/plain;charset=utf-8"); 
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();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
 create();
}

//通过员工编号搜索员工
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;
}

//创建员工
function create(){
//判断信息是否填写完全
if (!isset($_POST["name"]) || empty($_POST["name"])
 || !isset($_POST["number"]) || empty($_POST["number"])
 || !isset($_POST["sex"]) || empty($_POST["sex"])
 || !isset($_POST["job"]) || empty($_POST["job"])) {
echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';
return;
 }
//TODO: 获取POST表单数据并保存到数据库

//提示保存成功
echo '{"success":true,"msg":"员工：' . $_POST["name"] . ' 信息保存成功！"}';
}

?>

客户端html
不能直接显示服务端返回的json数据，需要进行处理再显示。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
*{
font-size:20px;
line-height:1.2;
}
</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>
<!--创建xhr对象，发送异步请求，监听服务器的响应结果，将结果呈现在页面上-->
<script>
<!--get请求-->
document.getElementById("search").onclick=function(){
//发送Ajax查询请求并处理
var request = new XMLHttpRequest();
 request.open("GET","server.php?number="+document.getElementById("keyword").value);
 request.send();
//显示查询结果
//监听服务器上readystate属性，当xhr的readystate属性值为4时，说明服务器的请求已经结束。如果status值为200则显示服务器响应的报文。如果status值不是200则弹窗提示显示错误。
 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);
 }
 }
 }
 }

<!--post请求-->
document.getElementById("save").onclick=function(){
//发送Ajax请求并处理
var request = new XMLHttpRequest();
 request.open("POST","server.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);
//显示查询结果
//监听服务器上readystate属性，当xhr的readystate属性值为4时，说明服务器的请求已经结束。如果status值为200则显示服务器响应的报文。如果status值不是200则弹窗提示显示错误。
 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>

**

5-1 JQuery中的Ajax

**
JQuery本身封装了一些AJAX方法，jQuery中的ajax方法为：
jQuery.ajax([settings])

该方法的设置有：
type：类型，“POST”或“GET”,默认为“GET”
url：发送请求的地址
data：是一个对象，连同请求发送到服务器的数据，主要是post请求时用。
dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为”json”。
success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串。
error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象。

使用jQuery来改写刚才的例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
*{
font-size:20px;
line-height:1.2;
}
</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>
<!--引入jq-->
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<!--创建xhr对象，发送异步请求，监听服务器的响应结果，将结果呈现在页面上-->
<script>
$(document).ready(function() {
 <!--get请求-->
 $("#search").click(function(){
 $.ajax({
 type:"GET",
 url:"server.php?number="+$("#keyword").val(),
 dataType:"json",
 success:function(data){
if(data.success){
 $("#searchResult").html(data.msg);
 }
else{
 $("#searchResult").html("出现错误："+data.msg);
 } 
 },
 error: function(jqXHR){
 alert("发生错误："+jqXHR.status);
 }
 })
 });
<!--post请求-->
 $("#save").click(function(){
 $.ajax({
 type:"POST",
 url:"server.php", 
 data:{
 name:$("#staffName").val(),
 number:$("#staffNumber").val(),
 sex:$("#staffSex").val(), 
 job:$("#staffJob").val(),
 },
 dataType:"json",
 success:function(data){
 if(data.success){ 
 $("#createResult").html(data.msg);
 }
 else{ 
 $("#createResult").html("出现错误："+data.msg);
 } 
 },
 error: function(jqXHR){
 alert("发生错误："+jqXHR.status);
 }
 });
 }); 
});
</script>
</body>
</html>

6-1 处理跨域方式——代理

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。因为javascript同源策略的限制，a.com域名下的js无法操作b.com或者是c.a.com域名下的对象。

主域名：
abc.com
子域名：
www.abc.com
bbs.abc.com
beijing.bbs.abc.com
haidian.beijing.bbs.abc.com
只要子域名不相同都会被认为是跨域。

处理跨域方法一：代理
通过同域名的web服务器端创建一个代理：
北京服务器（域名：www.beijing.com）
上海服务器（域名：www.shanghai.com）
北京的前端调用北京的后台服务。北京的后台服务调用上海的后台服务。北京的后端服务就是一个代理。
在北京的web服务器的后台（www.beijing.com/proxy-shanghaiservice.php）来调用上海服务器（www.shanghai.com/service.php）的服务，然后再把响应结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

6-2 处理跨域方法二——JSONP

JSONP可用于解决主流浏览器的跨域数据get请求访问的问题。
a域名来声明，b域名来调用。只是借助于

<script>
function jsonp(json){
 alert(json["name"]);
}
</script>
<script src="http://www.bbb.com/jsonp.js"></script>

在www.bbb.com页面中：

jsonp({'name':'洪七','age':24});

jQuery中的ajax方法是支持jsonp的处理方式。
前端只需要修改dataType:”jsonp”
同时在其下一行添加jsonp:”callback123”
后端代码如下：

<?php
//设置页面内容是html编码格式是utf-8
//header("Content-Type: text/plain;charset=utf-8"); 
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();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
 create();
}

//通过员工编号搜索员工
function search(){
$jsonp = $_GET["callback123"];
//检查是否有员工编号的参数
//isset检测变量是否设置；empty判断值为否为空
//超全局变量 $_GET 和 $_POST 用于收集表单数据
if (!isset($_GET["number"]) || empty($_GET["number"])) {
echo $jsonp . '({"success":false,"msg":"参数错误"})';
return;
 }
//函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
//global 关键词用于访问函数内的全局变量
global $staff;
//获取number参数
$number = $_GET["number"];
$result = $jsonp . '({"success":false,"msg":"没有找到员工。"})';

//遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
foreach ($staff as $value) {
if ($value["number"] == $number) {
$result = $jsonp . '({"success":true,"msg":"找到员工：员工编号：' . $value["number"] .
'，员工姓名：' . $value["name"] . 
'，员工性别：' . $value["sex"] . 
'，员工职位：' . $value["job"] . '"})';
break;
 }
 }
echo $result;
}

//创建员工
function create(){
//判断信息是否填写完全
if (!isset($_POST["name"]) || empty($_POST["name"])
 || !isset($_POST["number"]) || empty($_POST["number"])
 || !isset($_POST["sex"]) || empty($_POST["sex"])
 || !isset($_POST["job"]) || empty($_POST["job"])) {
echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';
return;
 }
//TODO: 获取POST表单数据并保存到数据库

//提示保存成功
echo '{"success":true,"msg":"员工：' . $_POST["name"] . ' 信息保存成功！"}';
}

?>

**注：JSONP只能对GET请求起到效果！！！**jsonp不支持post请求。

6-3 处理跨域方式——XHR2

——end——