首页 > 代码库 > AJAX（一）
AJAX（一）
AJAX（一）
Ajax是Asynchronous Javascript和XML的简写，这一技术能够向服务器请求额外的数据而无需卸载页面，会带来更好的用户体验。
【前面的基础知识】
[关于同步和异步的了解]
同步：页面请求实时传给服务器，导致必填数据没有填的时候，要回到页面上重新从头填写，耗时长、客户体验差。
异步：在页面必填项写上必填选项，不用通过传给服务器判断必填内容是否已经填写完整，耗时短、用户体验强。
1、利用html+css来实现页面，表达信息；
2、用XMLHttpRequest和web服务器进行数据的异步交换
3、运营js操作DOM，实现动态局部刷新；
XMLHttpRequest对象的出现分割了同步和异步。XMLHttpRequest出现之前是同步的，出现之后是异步的。
[HTTP知识了解]
HTTP是计算机通过网络进行通信的规则
HTTP是一种无状态[不建立持久的连接]协议
一个完整的HTTP请求过程，通常有7个步骤：
1.建立TCP连接
2.web浏览器向web服务器发送请求命令
3.web浏览器发送请求头信息
4.web服务器应答
5.web服务器发送应答头信息
6.web服务器向浏览器发送数据
7.web服务器关闭TCP连接
一个HTTP请求一般由4部分构成：
1.HTTP请求的方法或动作[GET/POST]
GET:一般用于信息获取。使用URL传递参数。对所发送信息的数量也有限制[2000字符左右]。 幂等
POST:一般用于修改服务器上的资源。对所发送信息的数量无限制
2.正在请求的URL
3.请求头，包含一些客户端环境信息、身份验证信息等
4.请求体，即请求正文，包含客户提交的查询字符串信息、表单信息等
3和4之间一般会有一段空行 用来表示请求头的结束
一个HTTP响应一般由3部分构成：
1.一个数字和文字组成的状态码，用了显示请求是成功还是失败
2.响应头，和请求头一样包含许多有用的信息如服务器类型、日期事件、内容类型和长度等
3.响应体，即响应正文。
HTTP状态码由3为数字构成，其中首位数字定义了状态码的类型：
1xx：信息类，表示收到Web浏览器请求，正在进一步的处理中
2xx:成功，表示用户请求被正确接收，理解和处理 例如 200 ok
3xx：重定向，表示请求没有成功，客户必须采取进一步的动作
4xx：客户端错误，表示客户端提交的请求有错误， 如 404 NOT Found，意味着请求中所引用的文档不存在
5xx:服务器错误，表示服务器不能完成对请求的处理 如 500
更多关于HTTP的介绍请转至：http://www.cnblogs.com/foodoir/p/5905946.html
[XMLHttpRequest的用法]
1、XMLHttpRequest对象创建
var request;if(window.XMLHttpRequest){ request = new XMLHttpRequest(); //IE7+,Firefox,Chrome,Opera,Safari...}else{ request = new ActiveXObject("Microsoft.XMLHTTP"); //IE6，IE5}else{ alert("No XHR object available.");}
或者：
function(){ if(tyof XMLHttpRequest != "undefined"){ return new XMLDocument(); }else if(typeof ActiveXObject != "undefined"){ if(typeof arguments.callee.activeXSting != "string"){ var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML.XMLHttp"],i,len; for(i=0,len=versions;i<len;i++){ try{ new ActiveXObj(versions[i]); arguments.callee.activeXString = versions[i]; break; }catch(ex){ //------ } } } return new ActiveXObject(arguments.callee.activeXString)); }esle{ throw new Error("No XHR object available."); }}
2、XMLHttpRequest发送请求
XMLHttpRequest发送请求有两个方法open和send
open(method,url,async)，有三个参数：
method：规定HTTP发送请求的方式是get还是post,不区分大小写，一般来说用大写
url：请求地址(相对地址或绝对地址)
async:同步/异步(false/true)，默认是异步也就是true，可以不用填写
send(string):发送到服务器（该参数可以填或者不填-----get方法不填或填null，post:一般要填）
get实例：
var request = new XMLHttpRequest();request.open("GET","get.php",true);request.send();
post实例：
var request = new XMLHttpRequest();requset.open("POST","post.php",true);request.send();
上面的这种做法是不正确的，POST请求的时候需要加上（一般不发送文件都用这个）request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");一定要写在open和send中间，具体做法如下：
var request = new XMLHttpRequest();request.open(‘POST‘, ‘post.php‘, true) // 默认true异步操作request.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘); //一般发送表单信息 需做该声明request.send(‘name=foodoir&sex=男‘);
[XMLHttpRequest取得响应]
在接收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性简介如下：
responseTest：作为响应主体被返回的文本
responseXML：如果响应的内容是“text/xml”或“application/xml”，这个属性将保存包含着响应数据的XML DOM文档
status：响应的HTTP状态
statusText：HTTP状态的说明
下面我们直接看一个例子：
//先new一个xmlHttpRequest对象，再调用open方法，再发送一些数据，最后对这个响应进行监听。var request = new XMLHttpRequest();request.open("GET","get.php",true);request.send();// 为request注册监听事件request.onreadystatechange = function(){ if(request.readyState === 4 && request.status === 200){ // 当请求成功时，执行... ... }}
或者说我们还可以这样做：
var xhr = CreateXHR();xhr.onreadystatechange = function(){ if(xhr.readyState == 4){//检测XHR的readyState属性 if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){ alert(xhr.responseText); }else{ alert("Request was unsuccessful:" + xhr.status); } }};xhr.open("GET","get.php",true);xhr.send(null);
补充：关于readyState属性值
0：尚未初始化。open()方法还没有调用
1：启动。open()方法已经调用,send()方法还没有调用
2：发送。open()方法已经调用,s还没有接收到响应
3：接收。已经接收到部分响应数据
4：完成。已经接收全部的相应数据，而且已经可以在客户端使用了
[PHP的一些知识]
关于PHP的作用：PHP是一种创建动态交互性站点的服务器端脚本语言； PHP能够生成动态页面内容； PHP能够创建、打开、读取、写入、删除以及关闭服务器上的文件； PHP能够接受表单数据； PHP能够发送并取回cookies； PHP能够添加、删除、修改数据库中的数据； PHP能够限制用户访问网站中的某些页面
为了运行PHP，我们需要搭建一个运行环境，在这里推荐以一个软件xampp（已经将我们需要的环境配置好了），其下载地址：https://www.apachefriends.org/download.html
PHP 服务器端实现:PHP脚本以<?php 开头 以?>结尾;PHP文件的默认文件扩展名是 .php;PHP语句以分号结尾（;）
下面我们来看一段PHP代码：
<?php//echo "hello world";//这是一个纯PHP的文件，//设置页面内容是html编码格式是utf-8,这样防止页面返回的值是乱码//text/plain; application/json;text/xml;text/html;application/javascript;这都是高度客户端//服务器响应过来的内容它的格式是什么。text/plain;是代表格式是纯文本，application/json;是代表格式是json字符串header("Content-Type:text/plain;charst = utf-8");//header("Content-Type:application/json;charst = utf-8");//header("Content-Type:text/xml;charst = utf-8");//header("Content-Type:text/html;charst = utf-8");//header("Content-Type:application/html;charst = 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();}else if($_SERVER["REQUEST_METHOD"] == "POST"){ create();}//通过员工编号搜索员工function search(){//在PHP中，超全局变量，也就是我们理解的全局变量，它可以在一个脚本的全部作用域中都可以用， //检查是否有员工编号的参数 //isset检测变量是否设置；empty判断值为否为空 //超全局变量 $_GET 和 $_POST 用于收集表单数据 //首先我们检查一下参数里边有没有员工的编号，如果没有员工的编号，我们是没法搜索员工的，所以我们用这种方式来 //检查一下我们的GET的url参数中有没有number这么一个字段，isset是检查变量是否设置，也就是这个number变量有没有 //empty代表这个变量是否为空，在这里，如果这个变量没有或者为空，我们都显示参数错误：echo "参数错误"; //也就是说页面直接返回“参数错误”,在浏览器中预览一下，我们没有任何参数的情况下，代表的是一个get请求，当我们没有 //加number参数的时候。它会直接返回参数错误，当然如果有参数错误，就直接查询了。查询，就把这个number参数获取到 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"]."信息保存成功！";}?> PHP服务端的代码已经写完了，但是这个代码写的对不对呢，能不能顺利的执行呢，我们需要进行一下测试 这个所谓的测试可不是我们把客户端Ajax请求各个事件都给写完之后，来对它进行测试，我们需要在没有客户端的情况下，就对服务端的一些请求进行一些测试，这是怎么样来做到的呢？我们通过一个工具fiddler工具（Fiddler是一个http协议调试代理工具，它能够记录并检查所有你的电脑和互联网之间的http通讯，设置断点，查看所有的“进出”Fiddler的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思）。 Fiddler 要比其他的网络调试器要更加简单，因为它不仅仅暴露http通讯还提供了一个用户友好的格式。），这个工具可以监听整个电脑所有发出的HTTP请求，可以监听它们传入的值，和相应回来的值，当然在这里边它还可以去模拟
在百度上搜索fiddler就可以下载到，直接安装。不想下载fiddler，可以下载chrome插件postman同样的功能。
fiddler可以监听电脑上所有的HTTP请求(GET和POST等)监听他们传入的值和返回的值。后台测试接口工具。
使用：右边栏有compose都标签页。输入刚才地址后excuse他。双击左栏的记录。用post请求的时候要用到contentType：application/x-www-form-urlencodeed,告诉服务器是一个post请求，并且是写在url里面。
下面我们在Fiddler软件中输入：
GET http://localhost/php/09-21/01.php HTTP/1.1Host: localhostProxy-Connection: keep-aliveUser-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2816.0 Safari/537.36Accept: */*Referer: http://localhost/php/09-21/01.htmlAccept-Encoding: gzip, deflate, sdch, brAccept-Language: zh-CN,zh;q=0.8
显示的结果为：参数错误，如图：
原因分析：我们没有输入输入参数
测试1：我们在后面传入参数，number。代码：GET http://localhost/php/09-21/01.php?number HTTP/1.1
结果1：参数错误
测试2：我们在后面传入参数，number=1。代码：GET http://localhost/php/09-21/01.php?number=1 HTTP/1.1
结果2：没有没有找到员工。
测试3：我们在后面传入参数，number=101.代码：GET http://localhost/php/09-21/01.php?number=101 HTTP/1.1
结果3：找到员工：员工编号：101，员工姓名：洪七，员工性别：男，员工职位：总经理
下面我们用POST方法，输入如下代码：
POST http://localhost/php/09-21/01.php?number=101 HTTP/1.1Host: localhostContent-type: application/x-www-form-urlencodedProxy-Connection: keep-aliveUser-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2816.0 Safari/537.36Accept: */*Referer: http://localhost/php/09-21/01.htmlAccept-Encoding: gzip, deflate, sdch, brAccept-Language: zh-CN,zh;q=0.8Content-Length: 54
结果显示为：参数错误，员工信息填写不全，如图：
原因分析：还是没有输入参数
测试1：我们在后面传入参数，代码：name=foodoir&number=104&sex=男&job=web前端工程师
结果1：员工foodoir信息保存成功！效果如图：
大家在日常进行web开发的时候，有时候后台做好之后，总是等待依赖前台做好之后，可以去调试，其实完全没有必要我们只需要约定好接口， 发送的报文和返回的报文，通过fiddler或者类似的工具，直接就可以进行调试了。不需要依赖前台是否完成，在这里推荐一个网站(http://www.imooc.com/learn/37)有专门讲解fiddler的使用方法。
【AJAX实战】
我们先完成html代码
<h1>员工查询</h1> <lable>请输入员工编号：</lable> <input type="text" id="keyword"/> <button id="search">查询</button> <p id="searchResult"></p> <hr /> <h1>员工创建</h1> <lable>请输入员工姓名：</lable> <input type="text" id="staffName"/><br /> <lable>请输入员工编号：</lable> <input type="text" id="staffNumber"/><br /> <lable>请输入员工性别：</lable> <select id="staffSex" name="sex"> <option>男</option> <option>女</option> </select><br /> <lable>请输入员工职位：</lable> <input type="text" id="staffJob"/><br /> <button id="save">保存</button> <p id="createResult"></p> <hr />
进一步完成Javascript代码
document.getElementById(‘search‘).onclick = function(){ //发送ajax请求并处理 var request = new XMLHttpRequest(); //request.open("GET","01.php") request.open("GET","01.php?number="+document.getElementById("keyword").value); request.send(); request.onreadystatechange = function(){ if(request.readyState === 4){ if(request.status === 200){ document.getElementById("searchResult").innerHTML = request.responseText; }else{ alert("发生错误："+request.status); } } }; }; document.getElementById(‘save‘).onclick = function(){ var request = new XMLHttpRequest(); request.open("POST","01.php"); var data = "http://www.mamicode.com/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");//在send方法中这段代码是很重要的 request.send(data); request.onreadystatechange = function(){ if(request.readyState === 4){ if(request.status === 200){ document.getElementById("createResult").innerHTML = request.responseText; }else{ alert("发生错误"+request.status); } } }; };对我们的代码进行测试，如图：
从结果中我们可以看出，员工的查询和新建员工的保存是互不影响的，并且每一步点击都会执行相应的操作。
然后我们发现用responseTest，纯文本的方式不太好，我们可不可以用JSON的格式来传递信息（关于更多JSON的知识，请移步至：http://www.cnblogs.com/foodoir/p/5894760.html）
这样，我们就需要对PHP中的代码进行修改，修改后的代码如下：
<?phpheader("Content-Type:application/json;charset = utf-8");$staff = array ( array("name"=>"洪七","number"=>"101","sex"=>"男","job"=>"总经理"), array("name"=>"郭靖","number"=>"102","sex"=>"男","job"=>"开发工程师"), array("name"=>"黄蓉","number"=>"103","sex"=>"女","job"=>"产品经理"), );if($_SERVER["REQUEST_METHOD"] == "GET"){ search();}else if($_SERVER["REQUEST_METHOD"] == "POST"){ create();}function search(){ if(!isset($_GET["number"]) || empty($_GET["number"])){ echo ‘{"success":false,"msg":"参数错误"}‘; return; } global $staff; $number = $_GET["number"]; $result = ‘{"success":false,"msg":"没有找到员工"}‘; 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; } echo ‘{"success":true,"msg":"员工：‘.$_POST["name"].‘信息保存成功！"}‘;}?>这里我们用到了HTTP的相关知识，JSON的相关知识等，有了这些基础我们学习起AJAX还是比较简单的。后面还打算学习AJXA跨域的相关知识，jquery中使用AJXA的方法……
AJAX（一）