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

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

CORS跨域请求

         CORS是W3C推出的一种新的机制,即跨资源共享(Cross-Origin Resource Sharing)。这种机制允许浏览器向跨源服务器发出XMLHTTPRequest请求,它基于浏览器的一个内置机制需要浏览器的支持。

          简单请求必须满足:1.请求方式为get,post,head  2.数据类型Content-Type只能是application/x-www-form-rulencoded、mulitipart/form-data或text/plain中的一种

        简单请求

//客户端
<!DOCTYPE html>
<html>
<head>
  <title>cors</title>
  <meta charset="utf-8">
</head>
<body>
<button onclick="sendGet()">点击我发一个简单的请求</button>
<script type="text/javascript">
  // ajax发送请求的函数
  function sendGet(){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function(){
      if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
        var data = xmlHttp.responseText;
        alert(data);
      }
    };
    // get方式的简单请求
    xmlHttp.open('GET','http://localhost:3000/3-6-2-cors-1-data',true);
    xmlHttp.send();
  }
</script>
</body>
</html>
 
// 服务器端
// jsonp跨域
app.get('/3-6-2-json-1.js',function(req,res){
  res.render('3-4-1-post');
});
// cors.html
app.get('/cors',function(req,res){
  res.render('cors');
});

预请求

    预请求是一种相对复杂的请求,需要满足:1.预请求是GET,HEAD,POST以外的方式,比如PUT,DELETE等

      2.使用POST请求方式,但数据是application/xml或者text/xml的XML数据请求  3.使用了自定义的请求头信息

// 服务器
// sors预请求
app.use('/3-6-2-cors-3-data',function(req,res){
  res.set({
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET,PUT,POST',
    'Access-Control-Allow-Headers':'X-Our-Header'
  });
  res.send('这是来自nodejs的数据');
});
 
 
//客户端
<!DOCTYPE html>
<html>
<head>
  <title>测试cors</title>
  <meta charset="utf-8">
</head>
<body>
<button onclick="sendGet()">点击发起一个请求</button>
<script type="text/javascript">
  // Ajax发送请求的函数
  function sendGet(){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function(){
      if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
        var data = xmlHttp.responseText;
        alert(data);
      }
    }
    // PUT方式的简单请求
    xmlHttp.open('PUT','http://127.0.0.1:3000/3-6-2-cors-3-data',true);
    // 设置请求头信息
    xmlHttp.setRequestHeader('x-Our-Header','ab');
    // 发送请求
    xmlHttp.send();
  }
</script>
</body>
</html>

附带凭证信息的请求

XMLHttpRequest对象在发送同域请求时会发送凭证(Http Cookie和验证信息,但是跨域请求则不会发送),所以想要传递cookie只能在请求头里携带

实例:

// 服务器
//  cors_cookie
app.get('/cors_cookie',function(req,res){
  res.render('cors_cookie');
});
// cors_cookie
app.get('/3-6-2-cors-4-data',function(req,res){
  console.log(req.cookies);
  res.set({
    'Access-Control-Allow-Origin':'http://127.0.0.1',
    'Access-Control-Allow-Credentials':true
  });
  res.send('这是来自nodejs的数据');
});
 
// 客户端
<!DOCTYPE html>
<html>
<head>
  <title>cors_cookie</title>
  <meta charset="utf-8">
</head>
<body>
  <button onclick="sendGet()">点击我发送一个cors跨域请求</button>
  <script type="text/javascript">
    document.cookie = "name=ab";
    // Ajax发送请求的函数
    function sendGet(){
      var xmlHttp = new XMLHttpRequest();
      xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
          var data = xmlHttp.responseText;
          alert(data);
        }
      };
      // GET方式的简单请求
      xmlHttp.open('GET','http://localhost:3000/3-6-2-cors-4-data',true);
      xmlHttp.withCredentials = true;  // 只需要在客户端申明这个就好了
      //xmlHttp.setRequestHeader('x-Our-Header','ab');
      xmlHttp.send();
    }
  </script>
</body>
</html>

ajax优缺点

ajax的优点

         1.无刷新,在不刷新页面的情况下加载数据增加用户体验

          2.浏览器都支持不需要重新下载额外插件

          3.使用异步通信用户不用长时间来等某一个操作,可以继续其他操作

          4.减轻服务器压力,加快响应速度

ajax的缺点

         1.破坏后退功能,用户不能通过后退来取消前一次操作,虽有办法,但是仍然很笨重

         2.网络延迟问题。通常会通过一些进度条来告诉用户正在读取数据

         3.安全性问题。ajax变相地提供了一个访问数据库的接口,而且ajax的代码都是暴露在浏览器中的,很容易被黑客利用,进行脚本攻击或者sql注入,当然对应地也有一些方法去解决这些问题

     总体来说优点大于缺点。

目录
相关文章
|
3天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
10 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月前
|
JSON JavaScript 前端开发
node.js第三天-----ajax(2)
node.js第三天-----ajax(2)
22 0
|
1月前
|
JSON 前端开发 JavaScript
node.js第三天-----ajax(1)
node.js第三天-----ajax(1)
32 0
|
3月前
|
XML JSON 前端开发
|
4月前
|
前端开发 JavaScript API
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
|
5月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
38 0
|
4月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
53 0