node.js第三天-----ajax(1)

简介: node.js第三天-----ajax(1)

同步和异步

    同步:某一进程在请求服务器的时候这个进程会等待服务器返回的数据,接收到数据之后再继续执行其他操作,一般用在页面需要服务端数据返回才能正常运行的情况下。

    异步:进程在请求服务器时,不等待服务器返回的数据,继续执行其他操作,一般用在不需要服务端数据就可以正常运行的程序中。

XMLHttpRequest对象的方法

   

方法 描述
abort() 取消当前响应,关闭链接并且结束任何未解决的网络活动
getAllResponseHeaders() 把HTTP响应头部作为未解析的字符串返回
getResponseHeader() 返回指定的HTTP响应头部的值。
open() 初始化HTTP请求参数,如URL和HTTP方法,但是并不发送请求
send() 发送HTTP请求,使用传递给open()的方法的参数,以及传递给该方法的可选请求体
setRequestHeader() 向一个打开但未发送的请求设置或添加一个http请求

 

   

// 实例代码
<script>
    // 首先创建XMLHttpRequest对象
    var xmlhttp = null;
    if(window.XMLHttpRequest){
        // 创建所有主流浏览器支持的XMLHttpRequest对象
        xmlhttp = new XMLHttpRequest();
    }else{
        // 创建IE5和IE6支持的XMLHTTPRequest对象
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 初始化请求参数
    xmlhttp.open('get','http://location:3000/3-3-1-get-data',true);
    // 设置请求头信息
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencode");
   // 发送请求
   xmlhttp.send("name=Tome&age=18");
</script>
 
 
// open() 方法用来初始化XMLHttpRequest对象,设置请求方式,URL,请求异步同步,该方法的格式open(method,url,ansyc,username,password)
// method是get,post,put,delete,head
// url 是我们请求的地址
// async是否请求异步 true是异步请求 false是同步请求
// username和password是可选的,为url所需的授权提供资格认证,如果指定了会覆盖之前的任何认证
 

注意:在调用open()方法的时候,readyState状态值会变成1,同时responseText,responseXML,status和statusText属性复位到他们的初始值

XMLHttpRequest对象的属性和事件

属性或事件 描述
readySate属性 http的请求状态,当XMLHttpRequest()对象呗初次创建时,这个属性的值从0开始,知道接收到完整的http响应,这个值增加到4
onreadystatechange事件 每次readySate状态改变的时候调用的事件句柄函数。当readyState状态值为3时,是一个持续接收数据的过程
status属性 由服务器返回的http状态码,200表示成功,404表示not find。当readyState小于三的时候status会抛出一个异常。也就是说只有readyState是3的时候才会用到这个属性
statusText属性 status返回了状态码,返回了与状态码对应的状态名称。属性是404的时候返回not found 当readyState小于三的时候会抛出异常
responseXML属性 对请求的响应,解析为Document对象返回。这个属性现在很少使用,使用json数据会更加方便
responseText属性

到目前为止(也就是这个属性被调用的时候),从服务器接收到的响应体。如果说readyState等于3时,说明只接受到头信息,响应体是空字符串,当readyState状态值为4的时候,表明数据接收完成

如果服务器响应头设定了字符集则采用,否则默认为Unicode UTF-8字符集

 

     readySate状态值

状态值 名称 描述
0 Uninitialized 初始化状态。XMLHttpRequest对象以及创建或已被abort()方法重置
1 Open open()方法已被调用,但是send()方法未被调用。请求还没被发送
2 Sent send()方法已被调用,HTTP请求已发送到Web服务器,未接收到响应
3 Receiving 所有响应头部已经被接收到,响应体开始接收但是未完成
4 Loaded HTTP响应(所有的数据)已经被完全接收到

 

// XMLHttpRequest的详细流程
<!DOCTYPE html>
<html>
<head>
  <title>XMLHttpRequest</title>
</head>
<body>
  <h1>创建XMLHttpRequest对象</h1>
  <script type="text/javascript">
    var xmlhttp = null;
    if(window.XMLHttpRequest){
      // 主流浏览器
      xmlhttp = new XMLHttpRequest();
        // 弹出readyState值
        alert('XMLHttpRequest对象创建时readyState的值为:'+xmlhttp.readyState);
    }else if(window.ActiveXObject){
      // IE5.IE6创建XMLHttpRequest对象
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      // 弹出readystate的状态
      alert('XMLHttpRequest对象创建时readyState的值为:'+xmlhttp.readyState);
    }
 
    var i = 1;
    // 每次readyState改变都会出发onreadystatechange事件
    xmlhttp.onreadystatechange = function(){
      // 验证readyState状态的改变,触发这个事件
      if(xmlhttp.readyState === 1){
        alert('open()方法执行完毕!readystate的值由0变为1!onreadystatechange第'+i++ +'次触发');
      }else if(xmlhttp.readyState === 2){
        alert('send()方法执行完毕!readystate的值由1变为2!onreadystatechange第'+i++ +'次触发');
      }else if(xmlhttp.readyState === 3){
        alert('接收响应头信息!readystate的值由2变为3!onreadystatechange第'+i++ +'次触发');
      }else if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
        alert('接收响应数据体完成,readySate的值由3变为4'+i++ +'次触发');
        // 弹出服务器响应状态
        alert('服务器的响应状态码为:'+xmlhttp.status + '!响应状态文本为:'+xmlhttp.statusText);
        alert('服务器响应数据为:'+xmlhttp.responseText); // 弹出服务器的响应数据
      }else{
        // 请求失败处理
        alert('服务器响应失败,失败的状态码为:'+xmlhttp.status+ '失败文本为:'+xmlhttp.statusText);
      }
    };
    // 设置请求信息
    xmlhttp.open('GET','http://localhost:3000/3-3-2-readyState-data',true);
    xmlhttp.send();
  </script>
</body>
</html>

XMLHttpRequest对象

     ajax的原理就是通过XMLHttpRequest对象向服务器发起异步请求,从服务器请求数据,然后通过JavaScript操作dom节点来更新数据。

GET请求实例和POST请求实例

      代码示例(服务端):

// 服务器端代码
app.get('/3-4-1-post',function(req,res){
  res.render('3-4-1-post');
});
// 3-4-1-post 答案的路由
app.post('/3-4-1-checkAnswer',function(req,res){
  var data = req.body;
  if(data.answer1=="人生自古谁无死" && data.answer2=="留取丹心照汗青"){
    res.send('正确');
  }else{
    res.send('错误');
  }
});
 
// 3-4-2查看答案的路由
app.get('/3-4-2-getAnswer',function(req,res){
  res.json({answer1:'人生自古谁无死',answer2:'留取丹心照汗青'});
})

浏览器端:

<!DOCTYPE html>
<html>
<head>
  <title>发送ajax</title>
</head>
<body>
  <div class="title">
    <h2>过零丁洋</h2>
    <h3>辛苦遭逢起一经,干戈寥落四周星。</h3>
    <h3>山河破碎风飘絮,身世浮沉雨打品。</h3>
    <h3>惶恐滩头说惶恐,零丁洋里叹伶仃。</h3>
    <input type="text" name="answer1" id="answer1">,
    <input type="text" name="answer2" id="answer2">。<br /><br />
    <button onclick="putAnswer()">提交答案</button>
    <button onclick="getAnswer()">查看答案</button>
    <div id="showAnswer"></div>
  </div>
    <script type="text/javascript">
      var xmlhttp = null;
      if(window.XMLHttpRequest){
        // 创建所有主流浏览器支持的XMLHttpRequest对象
        xmlhttp = new XMLHttpRequest();
      }else if(window.ActiveXObject){
        // 创建IE5和IE6的XMLHttpRequest对象
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
 
      // 向服务器提交答案
      function putAnswer(){
        var answer1 = document.getElementById('answer1').value;
        var answer2 = document.getElementById('answer2').value;
        //onreadystatechange 事件
        xmlhttp.onreadystatechange = function(){
          if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
            var result = xmlhttp.responseText;
            alert('您的答案:'+result);
          }
        }
        xmlhttp.open("POST",'http://localhost:3000/3-4-1-checkAnswer',true); // 设置请求信息
        // 设置请求头
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        // 发送数据
        xmlhttp.send('answer1='+answer1+'&answer2='+answer2);
      };
 
      // 向服务器请求正确答案
      function getAnswer(){
        // onreadystatechange 事件
        xmlhttp.onreadystatechange = function(){
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            var result = xmlhttp.responseText; // 获取服务器响应
            var obj = JSON.parse(result);  // 将服务器返回数据为json对象
            //展示数据
            document.getElementById('showAnswer').innerHTML = obj.answer1 +'?'+obj.answer2 +'.';
          }
        }
        // 设置请求信息
        xmlhttp.open("GET","http://localhost:3000/3-4-2-getAnswer",true);
        xmlhttp.send();
      }
    </script>
</body>
</html>

封装AJAX对象

         

//封装ajax对象
function Ajax(){
    var ajax = new Object();
    //get请求方法
    ajax.get = function(){
        
    }
    // post 请求方法
    ajax.post = function(){
        
    }
    return ajax;
}

      封装GET方法

               

//创建XMLHTTPRequest对象
ajax.createXMLHttpRequest = function(){
    // 定义空的xmlRequest对象
    var xmlRequest = false;
    if(window.XMLHttpRequest){
        // 主流
        xmlHttpRequest = new XMLHttpRequest();
    }else{
        // IE5,IE6
        xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlRequest;
}
ajax.xmlRequest = ajax.createXMLHttpRequest();
// 处理同步或者异步  数据格式
function Ajax(dataType,async){
    // 处理数据类型
    ajax.dataType = dataType ? dataType.toUpperCase() : 'HTML';
 
    // 处理同步异步
    if(typeof(bool) == "undefined"){
        ajax.async = true;
    }else{
        ajax.async = async;
    }
 
    // onreadystatechange事件
    ajax.changeFunction = function(){
        if(ajax.xmlRequest.readyState == 4 && ajax.xmlRequest.status == 200){
            if(ajax.dataType == 'HTML'){
                ajax.callback(ajax.xmlRequest.responseText);
            }else if(ajax.dataType == 'JSON'){
                // 处理json格式数据
                ajax.callback(JSON.parse(ajax.xmlRequest.responseText));
            }else if(ajax.dataType == 'XML'){
                ajax.callback(ajax.xmlRequest.responseXML);
            }
        }
    }
}
// get方法
ajax.get = function(url,callback){
    if(callback != null){
        // 便于使用onreadystatechange事件函数使用
        ajax.callback = callback;
        // 调用onreadystatechange事件函数,把服务器返回的数据给回调函数
        ajax.xmlRequest.onreadystatechange = ajax.changeFunction;
    }
    // 然后初始化GET请求
    ajax.xmlRequest.open("GET",url,ajax.async);
    // 发送请求
    ajax.xmlRequest.send();
}

      封装POST方法

//post方法
/** Ajax中post请求方法
  url请求的url
  endstring post请求携带的参数 字符串或json
  callback 用来接收服务器返回的回调函数
*/
ajax.post = function(url,sendString,callback){
    // 处理要向服务器提交的参数为xml支持的格式
    if(typeof(sendString == 'boject')){
        // 如果是json对象,转化成字符串
        var str = '';
        // 循环遍历这个对象
        for(var key in sendString){
                // 把json对象转化成name=Tom&age=19的形式
            str += key + '=' + sendString[key] + '&';
        }
        // 删除字符串最后一个‘&’
        sendString = str.substr(0,str.length-1);
    }
    // 判断是否有回调函数,有回调函数的话调用onreadystatechange事件函数
    if(callback != null){
        // 把传递过来的回调函数给ajax的一个属性
        // 便于onreadystatechange函数调用
        ajax.callback = callback;
        // 调用onreadystatechange事件函数,把服务器返回的数据给回调函数
        ajax.xmlRequest.onreadystatechange = ajax.changeFunition;
    }
    
    // 然后初始化post请求
    ajax.xmlRequest.open("POST",url,ajax.async);
    // 设置post请求头信息
    ajax.xmlRequestHeader('Content-Type','application/x-www-form-urlencoded');
    ajax.xmlRequest.send(sendString);
}
 
return ajax; // 返回ajax对象
}


目录
相关文章
|
9天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
13 0
|
3月前
|
前端开发 JavaScript
js + ajax实现商品列表页到详情页的跳转
js + ajax实现商品列表页到详情页的跳转
|
4月前
|
XML JSON 前端开发
深入了解JavaScript中的AJAX和HTTP请求
深入了解JavaScript中的AJAX和HTTP请求
|
1月前
|
JavaScript 前端开发
node.js第四天--ajax在项目中的应用
node.js第四天--ajax在项目中的应用
26 0
|
1月前
|
XML 前端开发 JavaScript
node.js第三天-----ajax(3)
node.js第三天-----ajax(3)
26 0
|
1月前
|
JSON JavaScript 前端开发
node.js第三天-----ajax(2)
node.js第三天-----ajax(2)
22 0
|
3月前
|
XML JSON 前端开发
|
4月前
|
前端开发 JavaScript API
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
|
2月前
|
JSON JavaScript 前端开发
JS服务端技术—Node.js知识点
本篇文章是我开始系统学习Node.js的一些笔记。如果文中阐述不全或不对的,多多交流。
62 0
JS服务端技术—Node.js知识点
|
3月前
|
JavaScript
node下的two.js调用one.js出现无法编译问题 Cannot find module ‘c:
node下的two.js调用one.js出现无法编译问题 Cannot find module ‘c:
47 0