Ajax学习笔记整理_AJAX相关

Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据.

Ajax历史....了解性知识

Ajax归属于Web前端开发技术, 与javascript有着异常紧密的联系. Ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(NetScape)公司最早发明了LiveScript脚本语言, 用来丰富网页元素的表现形式, 使网页能够呈现出动态效果. 随后的历次改版升级后就诞生了JavaScript语言, 与此同期微软(Microsoft)公司也看到互联网的前景, 开始涉足并发力于互联网行业, 推出了JScript语言, 可惜没有JavaScript成熟, 发展迟滞. 最终微软公司对互联网的决心促成了MS对NS的漫长曲折的收购历程.

这里提一下, 动态HTML语言(Dynamic Hyper Text Markup Language)就是将javascript放在Dom树的元素节点中, 为元素提供动态展示行为.

Ajax代码思路

创建请求对象

配置请求对象并发送到服务器

服务器应答请求对象

(1) 创建请求对象,作为和服务器进行通讯的对象:

function createRequest(){
try{
var request=new XMLHttpRequest();
}catch(tryMS){
try{
request=new ActiveXObject("Msxml2.XMLHTTP");
}catch(otherMS){
try{
request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(failed){
request=null;
}
}
}
return request;
}

注:ActiveXObject是Microsoft特定的一种编程对象,有两个不同版本由不同浏览器分别支持。XMLHTTP是可以在Javascript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。

获得请求对象request后,它有这么些个属性:

常用的有onreadystatechange,readyState,responseText,status。

(2)配置请求对象并发送到服务器:

var request=createRequest();
request.open("GET",url,true);
request.onreadystatechange=showResponse;
request.send(null);

open,send方法均来自request对象的原型XMLHttpRequest,打开__proto__:XMLHttpRequest可看到:

open()方法有三个参数,第一个是发送请求所使用的方法(GET还是POST,区别以后再总结),第二个是规定服务器端脚本的url(该文件可以是任何类型的文件),第三个参数规定是否进行异步处理(默认true异步)

send()方法将请求送往服务器。

我在这里注意到,request.onreadystatechange=showResponse;这句代码所在的位置不同,控制台输出的响应内容就不同。想来也是,回调函数加入任务队列的时机不同肯定输出不同啊,就比如现在这个位置,

request.onreadystatechange=showResponse;在open之后send之前,当代码解析到request.onreadystatechange=showResponse;时,此时的readyStates=1(请求已和服务器建立接连),此后当readyStates由1变为2,回调函数showResponse加入任务队列中等待被执行,readyState从2变化到3,回调函数showResponse第二次加入任务队列,readyState从3变化到4,回调函数再次加入队列。所以猜想当主代码执行完毕后,控制台会输出“请求已发送,服务器已接收,send之后”,“请求正在处理”,“请求已完成”;确实如此:

(3)服务器应答请求对象,js就可以处理响应内容了:

function showResponse(){
if(request.readyState==0){
console.log('请求未初始化,调用open之前');
}else if(request.readyState==1){
console.log('请求已提出,服务器连接已建立,open之后send之前');
}else if(request.readyState==2){
console.log('请求已发送,服务器已接收,send之后');
}else if(request.readyState==3){
console.log('请求正在处理');
}else if(request.readyState==4){
console.log('请求已完成');
if(request.status==200){
//处理request.responseText;
}
}
}

上面代码仅是为了跟踪readyState变化,实际项目代码要不了这么多。底下才是实际主要代码:

function showResponse(){
if(request.readyState==4){
if(request.status==200){
//处理request.responseText;
}
}
}

ps:Ajax解决什么问题

我们都知道, 在客户端向服务器请求一个页面时, 服务器首先动态的计算并生成出页面, 然后再发给客户端. 客户端浏览器顺序编译并呈现页面.

在没有Ajax时: 假如说页面有个用户验证控件, 那么在客户端浏览器呈现用户验证控件时, 会等待服务器的验证结果, 收到结果后才能继续呈现页面元素. 而这个验证过程通常要进行读取数据库等操作, 这就是所谓的同步方式. 而这种方式, 会造成网页呈现的假死状态.

在使用Ajax后: 同样是验证控件, 客户端提交了验证请求后, 便继续顺序呈现其他元素. 当取得验证结果后, 由javascript在客户端修改内存中的DOM对象后并呈献给用户(注意: 这里修改的只是内存中的DOM对象, 而客户端接收的页面文件并没有修改). 这样, 使用异步的方式, 就不会出现假死状态, 同时客户端也节省了等待服务器返回结果时的时间开销.

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索ajax学习
ajax笔记
,以便于您获取更多的相关知识。

时间: 2024-11-02 02:07:41

Ajax学习笔记整理_AJAX相关的相关文章

DWR util.js 学习笔记 整理_AJAX相关

util.js包含一些有用的函数function,用于在客户端页面调用,它可以和dwr分开,独立营用于你的系统中. 主要功能如下: 1.$() 获得页面参数值 2.addOptions and removeAllOptions 初始化下拉框 3.addRows and removeAllRows  填充表格 4.getText  取得text属性值 5.getValue 取得form表单值 6.getValues 取得form多个值 7.onReturn   8.selectRange 9.se

Ajax乱码问题整理_AJAX相关

产生原因主要有2个原因1 xtmlhttp 返回的数据默认的字符编码是utf-8,如果前台页面是gb2312或者其它编码数据就会产生乱码2 post方法提交数据默认的字符编码是utf-8,如果后台是gb2312或其他编码数据就会产生乱码 解决方法进一步整理中推荐方法,前台后台都用utf-8编码,这样可以省不少麻烦,从根本上解决了乱码问题.优点是效率高,而且符合目前的形式,utf-8编码本身就是一种比较优秀的编码,没有语言限制.缺点只能调用自己的后台编码或者其他的utf-8的编码.前台更改为 程序

Ajax学习笔记整理

Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据. Ajax历史....了解性知识 Ajax归属于Web前端开发技术, 与javascript有着异常紧密的联系. Ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(NetScape)公司最早发明了

Ajax学习笔记---3种Ajax的实现方法【推荐】_AJAX相关

Ajax:  Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据. (一) Ajax历史....了解性知识 Ajax归属于Web前端开发技术, 与javascript有着异常紧密的联系. Ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(NetScape)公司

JavaScript学习笔记整理_setTimeout的应用_基础知识

setTimeou的t应用 var ids = []; function foo1(i) { this.i = i; console.log('i = '+i); ids[0] = setTimeout((function () { foo1(i); }),1000); } function foo2(j) { this.j = j; console.log('j = '+j); ids[1] = setTimeout((function () { foo2(j); }),1000); } fo

Java中jqGrid 学习笔记整理——进阶篇(二)_java

相关阅读: Java中jqGrid 学习笔记整理--进阶篇(一) 本篇开始正式与后台(java语言)进行数据交互,使用的平台为 JDK:java 1.8.0_71 myEclisp 2015 Stable 2.0 Apache Tomcat-8.0.30 Mysql 5.7 Navicat for mysql 11.2.5(mysql数据库管理工具) 一.数据库部分 1.创建数据库 使用Navicat for mysql创建数据库(使用其他工具或直接使用命令行暂不介绍) 2. 2.创建表 双击打

.NET编程和SQL Server ——Sql Server 与CLR集成 (学习笔记整理-1)

原文:.NET编程和SQL Server --Sql Server 与CLR集成 (学习笔记整理-1) 一.SQL Server 为什么要与CLR集成 1. SQL Server 提供的存储过程.函数等十分有限,经常需要外部的代码来执行一些繁重的移植: 2.与CLR集成可将原本需要独立的程序来实现的功能迁移到SQL Server 内部进行数据操作: 3.T-SQL数据查询语言在返回数据集方面很好,但是除此之外表现不佳.与CLR的集成可解决这一问题: 4..NET的操作代码和执行的速度比T-SQL

JavaScript学习笔记整理_用于模式匹配的String方法_基础知识

用于模式匹配的String方法: String支持4种使用正则表达式的方法: seach()用于检索,参数是一个正则表达式,返回第一个与之匹配的子串的位置,找不到则返回-1,如果参数不是正则表达式,则首先会通过RexExp构造函数将它转换成正则表达式,seach()方法不支持全局搜索,它忽略修饰符g: replace()用于检索与替换操作,第一个参数是一个正则表达式,第二个参数是要进行替换的字符串.它对调用该方法的字符串检索,按照模式匹配子串替换成第二个参数,若包含修饰符g则全文匹配.若第一个参

jqGrid 学习笔记整理——进阶篇(一 )_jquery

 在浏览导航栏添加所需按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DEMO</title> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> <link rel=