对Ajax的一些理解
前言
在学习js的过程，我个人对于Ajax这项技术有着很深的印象，大概是因为它在我们网页开发过程中常见的交互里所发挥的作用太过于关键了吧，所以我想在这里好好地谈一些自己对它的理解。
概念理解
Ajax英文全称为Asynchronous JavaScript and XML，意思就是异步JS和XML；那么既然讲到异步，我在这里要说明一下同步和异步现象。
同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态。
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死。
那么可以理解为异步是相对于同步来说的，同步即同时进行（累积多了就排队，一个一个执行，必须等上一个结束，才能到下一个），而异步就是执行到我了，我去旁边继续执行等结果，后面排队的继续不用等我结果出来再执行。
技术特点
Ajax 是一种用于创建快速动态网页的技术，对网页的某部分进行更新，不用刷新整个网页。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而我之前所用过的诸如servlet+javabean在实现前后端交互时，如果需要更新内容，必需重载整个网页面。所以可以看出使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。
工作原理
简单来说工作原理是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。这相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。下面我引用一张图来体现Ajax所实现的浏览器和服务器之间的数据交互：
核心机制
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
下面我通过表格来展示XMLHttpRequest这个对象的属性和方法：
|
属性 |
说明 |
| readyState |
表示XMLHtpRequest对象的状态: 0: 未初始化。对象已创建，未调用open; 1: open方法成功调用，但Sendf方法未调用; 2: send方法已经调用，尚未开始接受数据; 3:正在接受数据。Http响应头信息已经接受，但尚未接收完成; 4:完成，即响应数据接受完成。 |
| Onreadystatechange |
请求状态改变的事件触发器(readyState 变化时会调用这个属性上注册的javascript函数)。 |
| responseText | 服务器响应的文本内容 |
| responseXML | 服务器响应的XML内容对应的DOM对象 |
| Status |
服务器返回的http状态码。200表示“成功”，404表示“未找到”，500表示“服务器内部错误”等。 |
| statusText | 服务器返回状态的文本信息 |
| 方法 |
说明 |
| Open(string method,string url,boolean asynch,string username,string password) |
指定和服务器端交互的HTTP方法，URL地址，即其他请求信息; Method:表示http请求方法，一般 使用"GET","POST"; url:表示请求的服务器的地址; asynch:表示是否采用异步方法，true为异步，false为同步; username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。
|
| Send(content) |
向服务器发出请求，如果采用异步方式，该方法会立即返回。 |
| SetRequestHeader(String header,String Value) |
设置HTTP请求中的指定头部header的值为value； 此方法需在open方法以后调用，一般在post方式中使用。 |
| getAllResponseHeaders() |
返回包含Http的所有响应头信息，其中相应头包括Content-length,date,url等内容。 |
| getResponseHeader(String header) | 返回HTTP响应头中指定的键名header对应的值 |
| Abort() |
停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。
|
下面展示一个简单的打开与服务器的连接（open方法）：
var xhr = new XMLHTTPRequest();
xhr.open("method", "url", "async");
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readystate == 4){
if(xhr.status == 200){
console.log(xhr.responseText)
}
}
}
常见使用流程
1.添加XMLHttpRequest对象。
2.打开与服务器的连接（open方法）。
3.发送请求（send方法）。
4.接收服务器响应。
5.if 发送POST请求。
个人开发实例分享
1.前端中的form表单提交数据使用ajaxSubmit与node.js进行通信
示例:
前端html：
<form action="/sjcs" target="nm_iframe" id="form" name="form" method="post" class="cardLayout">
<input id="output_id" type="text" name="output_id"/>
<input id="year_plan_id" type="text" name="year_plan_id"/>
<input id="output_count" type="text" name="output_count"/>
<input id="output_date" type="text" name="output_date"/>
<input type="reset" value="重置"/>
<input id="submit" type="reset" value="提交"/>
</form>
<script>
$(function () {
$("#submit").on("click", function () {
let output_id = $("#output_id").val();
let year_plan_id = $("#year_plan_id").val();
let output_count = $("#output_count").val();
let output_date = $("#output_date").val();
if (output_id && year_plan_id && output_count && output_date) {
$("#form").ajaxSubmit(
function (msg) {
if(msg=="1")
{alert("插入成功！");}
else if(msg=="-1"){
alert("插入失败！");
}
else if(msg=="-2")
{
alert("您没有该操作权限！");
}
location.reload();
})
} else {
alert("所有表格必填！");
//location.reload();
}
})
</script>
后台js:
router.post("/sjcs", function (req, res) {
db.query("select user_type as user_type from user where user_name=?",yonghu,function(err,result){
if(err){
console.log(err);
}
if(result[0].user_type!="访客"&&result[0].user_type!="市场人员")
{
var rst = req.body;
var record = [rst.output_id,rst.year_plan_id,rst.output_count,rst.output_date];
db.query("insert into output value(?,?,?,?)",record,function(err,result){
var x;
if(err){
console.log(err);
x=-1;
res.end(JSON.stringify(x));}
else{
x=1;
res.writeHead(200, {"Content-Type": "application/json"});
res.write(JSON.stringify(x));
res.end();
}
});
}
else{
var p=-2;
res.end(JSON.stringify(p));
}
});
});
这里事先已经引入对应的jQuery.js,通过前端表单信息的提交，表单内已经声明传输方式为post，并且指定了传输路径，采用ajaxSubmit实现数据传递。这里还有个细节是form表单的按钮属性为reset,即只起到重置作用，而如果将类型改为submit会导致二次传递数据给后台js使得对应操作执行两次。
2.前端添加信息事件通过Ajax与后台php进行通信
示例：
前端html:
<a href="javascript:;" class="add addBtn" id="addbtn">
<i class="icon"></i>
<span class="text">新增</span>
</a>
<script type="text/javascript">
//初始化dialog
$('.addDialog').Dialog({
title:'新增信息',
autoOpen: false,
width:400,
height:600
});
//打开dialog
$("#addbtn").click(function(){
//alert($("a[data-id]:eq(4)").attr("data-id"));
$(".addDialog").Dialog('open');
});
//确定按钮事件(提交)
$(".addDialog .ok").click(function(){
var iptvals=$(".addDialog input").serialize();
$.ajax({
type:"post",
url:"src/action/grxxadd.php",
data:iptvals,
dataType:"json",
success:function(da){
$(".addDialog").Dialog('close');
if(da['status']=="error"){
alert(da['msg']);
//TODO
}else{
alert(da['msg']);
}
}
})
});
$(".addDialog .normal").click(function(){
$(".addDialog").Dialog('close');
});
</script>
后台php:
<?php
require_once (dirname(__file__) . '/../global.php');
require_once 'comm/functions.php';
$db = getDBConnection();//获取数据库连接
$sno1=check_input(trim(isset($_REQUEST['sno1'])?$_REQUEST['sno1']:"10001"));
$sfno=check_input(trim(isset($_REQUEST['sfno'])?$_REQUEST['sfno']:"1"));
$op = check_input(trim(isset($_REQUEST['op'])?$_REQUEST['op']:"getAll"));
$otable=check_input(trim(isset($_REQUEST['otable'])?$_REQUEST['otable']:"个人信息"));
$pSize = (int)check_input(trim(isset($_REQUEST['pSize'])?$_REQUEST['pSize']:"10"));//每页显示条数s
$cPage = (int)check_input(trim(isset($_REQUEST['cPage'])?$_REQUEST['cPage']:"1"));//当前页数
$c = ($cPage-1)*$pSize;//获取从第几条开始取数据
$page=(int)check_input(trim(isset($_REQUEST['cPage'])?$_REQUEST['cPage']:"1"));
if($otable=="个人信息"){
$sql="SELECT 员工号 AS ygh, 姓名 as name, 性别 as sex, 出生日期 as csrq, 在职时间 zzsj, 职位 as zw,工作经历 as gzjl FROM grxx;";
}
$qre=$db->getAll($sql);
$sre=array("status"=>"success","type"=>"db","data"=>$qre);
$db=null;
echo json_encode($sre);
?>
这里是一种比较典型的Ajax使用方式。通过前端添加按钮的点击触发Ajax提交信息给后台，并且指定了具体路径、方式、数据格式等，后台依据接收到的信息实行与对应数据库交互的操作，最后返回操作信息给前台。
总结
在实际运用过程中我能感受到Ajax技术对于用户体验很棒，用户不需要刷新页面就能获取可更新的数据，也不需要插件支持，同时它的运用能够提升 Web 程序的性能，并减轻服务器和带宽的负担。但它也使得前进、后退的功能被破坏，因为 Ajax 永远在当前页，不会记录前后页面。并且我了解到在进行Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。如果不给予用户明确的回应，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理，都会使用户感到厌烦。
参考资料:Ajax工作原理图引自http://www.cnblogs.com/ygj0930/p/6126542.html
浙公网安备 33010602011771号