ajax前后端交互原理（6）
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版用户登录认证
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);
螺钉课堂视频课程地址：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是一种轻量级的数据交换格式,规则很简单: 并列的数据之间用逗号(,)分隔: 映射用冒号(:)表示: 并列数据的集合(数组)用方括号([])表示: 映射的集合(对象)用大括号 ...
随机推荐
- Spring Boot笔记(三) springboot 集成 Quartz 定时任务
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 1. 在 pom.xml 中 添加 Quartz 所需要 的 依赖 <!--定时器 quartz- ...
- Java并发编程 (一) 导读
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.并发编程相关技术栈 1.内容主要为高并发的解决思路与手段,具体涉及: 2.涉及的基础知识与核心知 ...
- Java实现 LeetCode 838 推多米诺（暴力模拟）
838. 推多米诺 一行中有 N 张多米诺骨牌,我们将每张多米诺骨牌垂直竖立. 在开始时,我们同时把一些多米诺骨牌向左或向右推. 每过一秒,倒向左边的多米诺骨牌会推动其左侧相邻的多米诺骨牌. 同样地, ...
- Java实现 LeetCode 749 隔离病毒（DFS嵌套）
749. 隔离病毒 病毒扩散得很快,现在你的任务是尽可能地通过安装防火墙来隔离病毒. 假设世界由二维矩阵组成,0 表示该区域未感染病毒,而 1 表示该区域已感染病毒.可以在任意 2 个四方向相邻单元之 ...
- Java实现 LeetCode 715 Range 模块（选范围）
715. Range 模块 Range 模块是跟踪数字范围的模块.你的任务是以一种有效的方式设计和实现以下接口. addRange(int left, int right) 添加半开区间 [left, ...
- Java实现 蓝桥杯VIP 算法训练 完数
问题描述 一个数如果恰好等于它的因子之和,这个数就称为"完数".例如,6的因子为1.2.3,而6＝1+2+3,因此6就是"完数".又如,28的因子为1.2.4. ...
- Java实现洛谷 P2802 回家
P2802 回家 时间限制 1.00s 内存限制 125.00MB 题目描述 小H在一个划分成了n*m个方格的长方形封锁线上. 每次他能向上下左右四个方向移动一格(当然小H不可以静止不动), 但不能离 ...
- 连接mongoodb并且向数据库添加信息
连接mongoodb 首先安装mongoose 配置URL 连接Mongoodb数据库 控制台输入指令运行该js文件 像这样就连接成功了 向Mongodb数据库增加信息,首先需要写入表格信息 接着解构 ...
- 搞清楚C语言指针
Part 0:为什么要写这篇文章 C语言中的指针是C语言的精髓,也是C语言的重难点之一. 然而,很少有教程能把指针讲的初学者能听懂,还不会引起歧义. 本文章会尝试做到这一点,如有错误,请指出. Par ...
- 为什么阿里巴巴Java开发手册中强制要求接口返回值不允许使用枚举？
在阅读<阿里巴巴Java开发手册>时,发现有一条关于二方库依赖中接口返回值不允许使用枚举类型的规约,具体内容如下: 在谈论为什么之前先来科普下什么是二方库,二方库也称作二方包,一般指公司内 ...