ajax入门
什么是Ajax
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML ），是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。
传统模式：等待——相应——等待
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
优势：
1：使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。
2：AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
执行流程：
1：ajax引擎(XMLHttpRequest)为对象注册一个监听器(事件处理函数，对状态的改变事件(readyStatechange)监听)
2：等待用户执行操作(例如点击)
3：触发了事件处理代码
4：调用ajax引擎
5：发送请求，ajax引擎被调用后单独向服务器发送请求(不是整个界面)——异步请求
6：服务器接受到了处理请求--开始处理
7：服务器将处理结果(xml或者文本)返回给了ajax引擎
8：监听相应数据
9：监听器对GUI数据更新
ajax变成
1：
获得引擎XmlHttpRequest对象
注意点:ie与别的浏览器获得方式不同
function getXmlHttpRequest(){
var xhr=null;
if((typeof XMLHttpRequest)!=‘undefined‘){
xhr=new XMLHttpRequest();
alert(‘dom‘)
}else{
xhr=new ActiveXObject(‘Microsoft.XMLHttp‘);
alert(‘IE‘)
}
return xhr;
}
或者
function GetXmlHttpObject() {
var objXMLHttp = null;
if (window.XMLHttpRequest) {
objXMLHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return objXMLHttp;
}
案例1：测试XMLHttpRequest
重要参数：
onreadystatechange——注册一个监听器(绑定时间处理函数)
readyState返回与服务器通讯状态码Number类型
0对象创建，但是没有初始化
1对象建立但是没有调用
2发送数据(send方法被调用)
3数据传送中
4响应结束
responseText——服务器返回的文本
responseXML——服务器返回的xml dom对象
status 获得状态码
案例1使用get方式提交，验证用户姓名
网页：
<form id="form1" action="http://127.0.0.1:9000" method="post">
姓名:<input type="text" name="name" id="name" onblur="check_name()"><span id="err"></span><br/>---验证
密码:<input type="password" name="pwd"><br/>
<input type="submit" value="提交">
</form>
js：
function check_name(){
var name=document.getElementById("name").value;
var xhr=getXmlHttpRequest();
//注册监听器
xhr.onreadystatechange=function(){
//处理服务器返回的数据
if(xhr.readyState == 4){
//xhr的状态值必须是4,才能正确接收
//到服务器返回的数据。
if(xhr.status == 200){
//ok
var txt = xhr.responseText;
//dom操作：更新页面
document.getElementById("err").innerHTML=txt;
}else{
//error
document.getElementById("err").innerHTML = ‘系统出错‘;
}
}
}
//step2 发送请求
xhr.open(‘get‘,‘checkName?name=‘+name,true);
//发送请求
xhr.send(null);
}
后台服务器
var express=require(‘express‘);
var app=express();
app.listen(9000,‘localhost‘)
app.get(‘/login.html‘,function(req,res){
res.sendfile(‘./login.html‘)
})
app.get(‘/checkName?:name‘,function(req,res){
//console.log(req.query.name)——获得了参数(注意是什么接受的)补充1
if(req.query.name==‘zhangsan‘){
res.send(‘已经被使用‘)
}else{
res.send(‘已经被使用‘);
}
})
这里有个坑，自己去玩，后边讲,如果你已经写到这里了，保重～～～～
127.0.0.1:3000/index?id=12，这种情况下，这种方式是获取客户端get方式传递过来的值，通过使用req.query.id就可以获
127.0.0.1：300/index，然后post了一个id=2的值，这种方式是获取客户端post过来的数据，可以通过req.body.id获取
post方式ajax检测用户名
js：
function check_name(){
var name=document.getElementById("name").value;
var xhr=getXmlHttpRequest();
//step2 发送请求
xhr.open(‘post‘,‘checkName‘,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//注册监听器
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var txt=xhr.responseText;
document.getElementById("err").innerHTML=txt;
}
}
}
//发送请求
xhr.send("name="+name);
}
比较一下有什么不同
nodejs：
var express=require(‘express‘);
var app=express();
var querystring=require(‘querystring‘)
app.listen(9000,‘localhost‘)
app.get(‘/login.html‘,function(req,res){
res.sendfile(‘./login.html‘)
})
app.post(‘/checkName‘,function(req,res){
req.on(‘data‘,function(data){
var obj=querystring.parse(data.toString());
if(obj.name==‘zhangsan‘){
res.send(‘名字被占用了‘)
}else{
res.send(‘可以使用啊‘)
}
})
})
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
