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){

    xhr = new ActiveXObject('Microsoft.XMLHTTP') //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版用户登录认证

<!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);

螺钉课堂视频课程地址：http://edu.nodeing.com

ajax前后端交互原理（6）的更多相关文章

ajax前后端交互原理（5）
5.ajax简介 5.1.什么是ajax Asynchronous JavaScript and XML ,异步的javascript和XML 5.2.使用ajax有什么用数据交互,可以从服务器获取 ...
ajax前后端交互原理（1）
1.Node.js简介 1.1.前后台数据交互流程在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首 ...
ajax前后端交互原理（7）
7.ajax函数封装 7.1.实例引入需求: 每秒钟请求一次服务器获取到数据实现: 把ajax进行封装 <!DOCTYPE html> <html> <head&g ...
ajax前后端交互原理（3）
3.HTTP服务器 3.3.相关前置知识 1 什么是url? 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的UR ...
ajax前后端交互原理（4）
4.JSON 4.1 什么是JSON? JavaScript 对象表示法(JavaScript Object Notation)简称JSON,是一种轻量级的数据交换格式.虽然它基于JavaScript ...
ajax前后端交互原理（2）
2.NPM使用 2.1.NPM是什么 NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,这里要搞清楚包的概念,通俗的说,包就是具有一定功能的工具(软件),本质 ...
thinkphp+jquery+ajax前后端交互注册验证
thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
SSM-网站后台管理系统制作（4）---Ajax前后端交互
前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...
JSON（及其在ajax前后端交互的过程）小识
一. json介绍 json是一种轻量级的数据交换格式,规则很简单: 并列的数据之间用逗号(,)分隔: 映射用冒号(:)表示: 并列数据的集合(数组)用方括号([])表示: 映射的集合(对象)用大括号 ...

随机推荐

(Java实现) 车站
题目描述火车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上.下车,但上.下车的人数相同,因此在第2站开出时(即在到达第3站之前)车上的人数保持为a人.从第3站起( ...
Java 是如何实现跨平台的？
Java 是如何实现跨平台的? 注意:跨平台的是 Java 程序,而不是 JVM.JVM 是用 C/C++ 开发的,是编译后的机器码,不能跨平台,不同平台下需要安装不同版本的 JVM 答:我们编写的 ...
opencl(2)平台、设备、上下文的获取与信息获取
1:平台 1)获取平台id cl_int clGetPlatformIDs( cl_uint num_entries, //想要获取的平台数 cl_platform_id * flatfor ...
心有 netty 一点通！
一.标准的netty线程模型双池合璧: 1.连接线程池: 连接线程池专门负责监听客户端连接请求,并完成连接的建立(包括诸如握手.安全认证等过程). 连接的建立本身是一个极其复杂.损耗性能的过程,此处 ...
php实现登录失败次数限制
需求:同一个账号在同一个IP地址连续密码输错一定次数后,这个账号是会被锁定30分钟的. 实现思路: 需要一个表(user_login_info)负责记录用户登录的信息,不管登录成功还是失败都记录.并且 ...
Ubuntu安装Vmware Tools解决屏幕比例失调
前言安装ubuntu虚拟机时默认比例如下图,且ubuntu系统选项中没有合适的比例,可以安装Vmware Tools来解决. 注意:该方法只适用于有操作界面的系统,之前有位小伙伴在服务器上也想安装T ...
TensorFlow从0到1之TensorFlow常用激活函数（19）
每个神经元都必须有激活函数.它们为神经元提供了模拟复杂非线性数据集所必需的非线性特性.该函数取所有输入的加权和,进而生成一个输出信号.你可以把它看作输入和输出之间的转换.使用适当的激活函数,可以将输出 ...
大数据之Hudi + Kylin的准实时数仓实现
问题导读:1.数据库.数据仓库如何理解?2.数据湖有什么用途?解决什么问题?3.数据仓库的加载链路如何实现?4.Hudi新一代数据湖项目有什么优势? 在近期的 Apache Kylin × Apach ...
一起读《Java编程思想》（第四版）
空余时间看<Java编程思想>(第四版)这本书,遇到不懂的知识点就记录在本博客内. 1.复用具体实现 Java代码复用的三种常见方式:继承.组合.代理. 1.继承:使用extends关键字 ...
C#数据结构与算法系列（八）：栈（Stack）
1.介绍栈是一个先入后出(FILO-First In Last Out)的有序列表栈是限制线性表中元素的插入和删除只能在线性表的同一端进行的特殊线性表.允许插入和删除的一端,为变化的一端,称为栈顶 ...

ajax前后端交互原理（6）