Ajax+Node.js前后端交互最佳入门实践(06)

6.XMLHttpRequest对象

XMLHttpRequest 是一个 API，它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。

6.1.创建XMLHttpRequest对象

6.1.1 XMLHttpRequest兼容性问题

XMLHttpRequest在ie6以下是以插件的形式来使用的，没有内置在浏览器中，所以在ie6以下不能通过new XMLHttpRequest的形式来使用，在ie下可以通过new ActiveObject("Microsoft.XMLHTTP")来使用,因此，可以写出这样：

var xhr = null;
 if(window.XMLHttpRequest){ //标准模式下
    xhr = new XMLHttpRequest();
 }else{//ie6以下走这里
    xhr = new ActiveXobject(‘Microsoft.XMLHTTP‘);
 }

　　

在很多地方也通过异常处理的形式来处理兼容。try...catch...finally语句语法结构：

try{
    //尝试着执行这段代码 如果有错就执行catch里面的代码
}catch(e){
    //try里面的错误信息都会被存放在 参数e里面
}finally{
    //不管是否有错最终都要执行这段代码 通常这里都不写 只是 try  catch的组合
}
try{
    sdfs;
    alert(1);
}catch(e){
    alert(2);
}finally{
    alert(3)
}
//执行结果 先弹2 再弹3   try里面的语句报错

　　

ajax对象兼容性写法：

var xhr = null ;
try{//标准下不会报错 执行这里的代码
    xhr = new XMLHttpRequest();
}catch(e){
    ed //ie下try里面的语句错误 执行这里的代码
}

　　

6.2.open 方法

open方法和表单提交数据很相似

表单提交数据：
    action: 数据提交的地址，如果不写，默认提交到当前页面
    method： 数据提交的方式，有get和post两种方式，默认使用get方式，url长度有限制，所以不要通过
    get方式传递过长的数据，post方式理论上没有长度限制，但是可以通过修改配置文件设置长度
    enctype: 提交数据的格式，默认提交数据格式为：enctype="application/x-www-form-urlencoded"

open方法语法：

xhr.open("get","01.txt",true);
xhr为创建好的ajax对象
第一个参数： 打开方式，这里的打开方式跟表单差不多，有get和post两种方式，相当于method
第二个参数： 打开的地址，这里就相当于表单里的acthion属性
第三个参数： 是否异步
             同步：阻塞模式，当前一条代码会影响后面代码执行
             异步：非阻塞模式，前面的 代码不会影响后面代码的执行

6.3.发送和获取数据

通过send方法发送数据，通过监听readystatechange事件来获取数据

//发送请求---->相当于点击回车键发送的过程
    xhr.send();
    //监听请求状态--->发送以后等待返回数据，网站展现出来
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            alert(xhr.responseText);
        }
    }

　　

responseText: 服务器返回的数据会存放到ajax对象的一个responseText属性中 readyState：表示ajax的工作状态，一共有5个状态

            状态0: 表示ajax对象创建成功（初始化），但是还没有调用open方法
            状态1:表示已调用send方法，正在发送数据（载入数据）
            状态2:send方法发送完成，已经收到响应内容（载入完成）
            状态3:表示正在解析内容（解析）（注：收到响应内容后，还需要解析内容）
            状态4:响应内容解析完成，可以使用数据了（注：状态为4的时候说明所有流程已经完成，拿到数据了）

onreadyStatechang：这个事件用来监听ajax工作状态的，可能会被触发多次，表示当状态发生改变的时候被触发

status: 表示服务器的状态码

通过以上几个属性的了解后，ajax获取数据时的容错处理可以写成这样：

xhr.onreadystatechange = function(){

    if(xhr.readyState == 4 ){
        if(xhr.status == 200){
            alert(xhr.responseText);
        }else{
            alert("出错了:"+xhr.status);
        }

    }
}

　　

6.4.带数据情况的处理

get方式发送数据，数据是放在url地址里面发送过去的，在ajax中也通过这种形式传送数据

//创建ajax对象 ---->相当于打开浏览器
    var xhr = new XMLHttpRequest();
    //打开要获取文件的地址---->相当于输入网址
    xhr.open(‘get‘,‘/getData?username=xiaoqiang&age=19‘,true);
    //发送请求---->相当于点击回车键发送的过程
    xhr.send();
    //监听请求状态--->发送以后等待返回数据，网站展现出来
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            alert(xhr.responseText);
        }
    }

　　

注意： 通过get方式发送请求在ie下会出现两个问题，第一个就是缓存问题 第二就是乱码问题，需要通过encodeURI()进行转码发送

post方式发送请求数据，数据是放在请求体里面传送过去的，在ajax中，数据放在send方法中传送过去，并且要设置请求头的类型

//创建ajax对象 ---->相当于打开浏览器
    var xhr = new XMLHttpRequest();
    //打开要获取文件的地址---->相当于输入网址
    xhr.open(‘post‘,‘/getData‘,true);
    //发送请求---->相当于点击回车键发送的过程
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
    xhr.send(‘username=xiaoqiang&age=19‘);
    //监听请求状态--->发送以后等待返回数据，网站展现出来
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            alert(xhr.responseText);
        }
    }

　　

举个栗子： 1 ajax版用户登录认证

login.html文件内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .msg{
            color: red;
        }
    </style>
</head>
<body>
<form action="">
    用户名: <input type="text" id="username"> <span class="msg"></span><br />
    密码: <input type="password" id="password"> <br />
    <input type="button" value="登录" id="btn">
</form>
<script>
    var oBtn = document.getElementById("btn");
    var oUser = document.getElementById(‘username‘);
    var oPass = document.getElementById(‘password‘);
    var oSpan = document.getElementsByClassName(‘msg‘)[0];
    oBtn.onclick = function () {
        var xhr = null;
        try {
          xhr = new XMLHttpRequest();
        }catch(e){
          xhr = new ActiveXobject(‘Microsoft.XMLHTTP‘);
        }
        xhr.open(‘post‘, ‘/login‘, true);
        xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);
        xhr.send(‘username=‘+oUser.value+‘&password=‘+oPass.value);
        xhr.onreadystatechange = function () {
             if(xhr.status === 200 && xhr.readyState === 4){
                var obj = JSON.parse(xhr.responseText);
                if(obj.status === 0){
                  alert(obj.message);
                  window.location.href = ‘http://nodeing.com‘;
                }else{
                  oSpan.innerHTML = obj.message;
                }

             }
        }
    }
</script>
</body>
</html>

　　

服务器端index.js中的代码

var http = require(‘http‘);
var url = require(‘url‘);
var fs = require(‘fs‘);
var querystring = require(‘querystring‘);
var app = http.createServer(function (req, res) {
  res.setHeader(‘content-type‘, ‘text/html;charset=utf-8‘);
  var url_obj = url.parse(req.url);
  if(url_obj.pathname === ‘/login‘ && req.method===‘GET‘){
    fs.readFile(‘./login.html‘,‘utf-8‘, function (err, data) {
      if(!err){
        res.write(data);
        res.end();
      }
    })
  }
  // 处理ajax请求
  if(url_obj.pathname === ‘/login‘ && req.method === ‘POST‘){
    console.log(1);
    var post_data = ‘‘;
    req.on(‘data‘, function (chunk) {
      post_data += chunk;
    });
    req.on(‘end‘, function () {
       var post_obj = querystring.parse(post_data);
       if(post_obj.username === ‘admin‘ && post_obj.password === ‘123456‘){
         res.write(‘{"status":0, "message":"登录成功"}‘);

       }else{
         res.write(‘{"status":1, "message":"用户名或者密码错误"}‘);
       }
      res.end();
    })
  }
});
app.listen(3000);

　　

2 获取后台数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function(){
                var oBtn = document.getElementById("btn");
                oBtn.onclick = function(){
                    //创建ajax对象
                    var xhr = null;
                    try{
                         xhr = new XMLHttpRequest();
                    }catch(e){
                         xhr = new ActiveXobject(‘Microsoft.XMLHTTP‘);
                    }
                    //打开要获取文件的地址
                    xhr.open(‘get‘,‘/getdata‘,true);
                    //发送请求
                    xhr.send();
                    //alert(xhr.responseText);
                    //监听请求状态
                    xhr.onreadystatechange = function(){

                        if(xhr.readyState == 4 && xhr.status==200){
                             var data = JSON.parse(xhr.responseText);
                             var oUl = document.getElementById(‘ul1‘);
                             for(var i=0;i<data.length;i++){
                                  var oli = document.createElement(‘li‘);
                                  oli.innerHTML = data[i].title+‘[‘+data[i].time+‘]‘;
                                  oUl.appendChild(oli);
                             }

                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="button" id="btn" value="获取数据" />
        <ul id="ul1"> 

        </ul>
    </body>
</html>

　　

app.js 代码：

var http = require(‘http‘);
var url = require(‘url‘);
var fs = require(‘fs‘);
var app = http.createServer(function (req, res) {
  res.setHeader(‘content-type‘, ‘text/html;charset=utf-8‘);
  var url_obj = url.parse(req.url);
  if(url_obj.pathname === ‘/‘){
    fs.readFile(‘./index.html‘,‘utf-8‘, function (err, data) {
      if(!err){
        res.write(data);
        res.end();
      }
    })
  }
  // 处理ajax请求
  if(url_obj.pathname === ‘/getdata‘){
    var arr = ‘[‘ +
        ‘{"title":"习大大出席国家科学技术奖励大会1","time":"‘+new Date().toLocaleDateString()+‘"},‘ +
        ‘{"title":"习大大出席国家科学技术奖励大会2","time":"‘+new Date().toLocaleDateString()+‘"},‘ +
        ‘{"title":"习大大出席国家科学技术奖励大会3","time":"‘+new Date().toLocaleDateString()+‘"},‘ +
        ‘{"title":"习大大出席国家科学技术奖励大会4","time":"‘+new Date().toLocaleDateString()+‘"}‘ +
        ‘]‘;
    res.write(arr);
    res.end();
  }
});
app.listen(3000);

　　

原文地址：https://www.cnblogs.com/nodeing/p/8809071.html

时间： 2024-10-09 13:14:23

Ajax+Node.js前后端交互最佳入门实践(06)的相关文章

Ajax+Node.js前后端交互最佳入门实践(01)

1.Node.js简介 1.0.前后台数据交互流程 在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首先,我们来看一张生活中几乎每个人都经历过的一个场景,如下图: 当你去餐馆吃饭的时候,坐下后服务员会带着一个菜单过来,问你需要点什么菜,这个时候你浏览了菜单上的菜,把想吃的菜告诉服务员,服务员把你点的菜拿到后台,后台根据你点的菜名,逐一完成,菜做完后叫服务员给你上菜,就这么一个场景其实和我们web开发

Ajax+Node.js前后端交互最佳入门实践(07)

7.ajax函数封装 7.1.实例引入 需求: 每秒钟请求一次服务器 获取到数据 实现: 把ajax进行封装 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="ajax.js" type="text/javascript" charset="utf

Ajax+Node.js前后端交互最佳入门实践(04)

4.JSON 4.1 什么是JSON? JavaScript 对象表示法(JavaScript Object Notation)简称JSON,是一种轻量级的数据交换格式.虽然它基于JavaScript的对象字面量表示法,但是它于语言却是无关的,这里说的无关意思是说没有依赖关系,不是说只有在js中才能用,再别的语言中也是可以用的. var student = { "name": '张三', "age": 29, "data":[1,2,3] };

写给刚入门的前端工程师的前后端交互指南

转自原文 写给刚入门的前端工程师的前后端交互指南 作为刚接触前端的不久的童鞋,大家都会兴奋于CSS和JS所带来漂亮界面,然而,前端工程师除了UI重构外,还有非常重要的职责在正确的区域渲染出服务端的数据.毕竟,我们要构建一个大的web应用,必然不是普普通通的静态页面构成. 下文将罗列将来前端工程师应该必备的同后端打交道的常用技能. 服务端渲染 谈起服务端渲染,对于动态服务而言,这个世界上跑的大多数页面都经历过服务端的数据渲染,接口->前端赋值->模版渲染 .这一切都在服务器完成,我们查看源码时候

SSM-网站后台管理系统制作（4）---Ajax前后端交互

前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码有点像. 学习教程:http://how2j.cn/ 菜鸟教程 上面都有讲解, 前端Ajax代码 1 </script> 2 3 <script language="javascript" type="text/javascript"> 4 $(

Vue-CLI项目-axios模块前后端交互(类似ajax提交)

08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$route.params.pk || this.$route.query.pk

初识 vue —— 最简单的前后端交互示例

一.初识 vue 时的困惑 最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧.都说 vue 的官方教程写得好,所以我就从官方教程开始学习.官方教程说"Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用."但是这个概念是个什么鬼?还是让人一头雾水嘛.而且我一开始也没有搞清楚 vue 的定位,只知道它是一个前端库,但是确实不知道它的优势是什么,还以为它是一个学会就能一劳永

百度ueditor的图片上传，前后端交互使用

百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor.config.js即可.这里就不多说. 至于图片上传,ueditor 设计的时候是考虑和后端交互的,所以会看到可以下载什么php,java版本,还有很多网上会说道有什么后端配置文件,改那改这的,但是实际上后端存储业务是按照公司实际来的,实践起来并不顺利. 本文重点讲述的只用前端文件和ueditor.

choices字段、MTV与MVC模型、AJAX、contentType前后端传输数据编码格式、序列化组件、AJAX+sweetalert使用

目录 choices字段.MTV与MVC模型.AJAX.序列化组件.AJAX+sweetalert使用 choices字段 MTV与MVC模型 ajax 特点: ajax传json格式数据 ajax传文件 ajax传文件需要注意的事项 contentType前后端传输数据编码格式 ajax + sweetalert的使用 序列化组件 choices字段.MTV与MVC模型.AJAX.序列化组件.AJAX+sweetalert使用 choices字段 主要运用在用一些特殊字符或数字代表繁琐的字符串