慕课：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;
    }