博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js实现ajax的步骤
阅读量:2056 次
发布时间:2019-04-28

本文共 1168 字,大约阅读时间需要 3 分钟。

开发步骤:

第一步:

创建ajax异步对象

第二步:

准备发送异步请求,例如:ajax.open(method,url);

第三步:如果是POST请求,一定要设置请求头,即

ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

第四步:

真正发送请求体的数据到服务器,例如:ajax.send();

第五步:

AJAX不断监听服务器响应的状态变化,例如ajax.onreadystatechange(),后面接个匿名函数

状态数据如下:

 ajax.readyState==0:表示AJAX异步对象已创建好,但还没有调用open()方法

 

ajax.readyState==1:表示AJAX异步对象已调用open()方法,但还没有调用send()方法

ajax.readyState==2:表示AJAX异步对象已调用send()方法,但请求还没有到达服务器端

ajax.readyState==3:表示服务端已接收到AJAX异步对象的请求,正在处理响应中。。。

ajax.readyState==【4】:表示AJAX异步对象已经完完全全接收到了服务器的响应信息,但接收到的数据不一定都正确

第六步:

在无名函数中判断是否接收到完整数据,即ajax.status=200,然后获取AJAX数据,按照DOM规则,用JS操作web页面

AJAX适合用在什么地方

      AJAX【适合】不用来传递大量数据,而只用来【传递少量数据】,在用户的【体验】上,【更加人性化】

      AJAX是一个和服务器无关的技术,即服务器可使用:JavaEE,.NET,PHP,。。。这些技术都可

      AJAX只管向服务器发送请求,同时只管接收服务器的HTML或XML或JSON载体响应

      服务端不能使用转发或重定向到web页面,因为这样会起浏览器全面刷新

       即只能以流的方式响应给浏览器

数据载体:

(1)HTML

(A)优点:服务端响应的是普通html字符串,无需JS解析,配合innerHTML属性效率高

(B) 缺点:如果需要更新WEB页面中的很多处地方,HTML不太方便,同时innerHTML属性不是DOM的标准,不能操作XML

 注意:innerHTML在xml中不能使用,用firstChild.nodeValue替代

 (C)适合:小量数据载体,且只更新在web页面中的一个地方

 

   (2)XML

(A)优点:是种通用的普通字符串格式,任何技术都能解析,标签名可以任意,使用DOM标准规则能够解析XML的任何部分

(B)缺点:XML文件格式相当严格,出错后,responseXML属性返回NULL,如果XML文件过长,导致解析效率低下

(C)适合:大量具有层次数据载体    

 

   (3)JSON

转载地址:http://sbslf.baihongyu.com/

你可能感兴趣的文章
利用栈实现DFS
查看>>
逆序对的数量(递归+归并思想)
查看>>
数的范围(二分查找上下界)
查看>>
算法导论阅读顺序
查看>>
Windows程序设计:直线绘制
查看>>
linux之CentOS下文件解压方式
查看>>
Django字段的创建并连接MYSQL
查看>>
div标签布局的使用
查看>>
HTML中表格的使用
查看>>
(模板 重要)Tarjan算法解决LCA问题(PAT 1151 LCA in a Binary Tree)
查看>>
(PAT 1154) Vertex Coloring (图的广度优先遍历)
查看>>
(PAT 1115) Counting Nodes in a BST (二叉查找树-统计指定层元素个数)
查看>>
(PAT 1143) Lowest Common Ancestor (二叉查找树的LCA)
查看>>
(PAT 1061) Dating (字符串处理)
查看>>
(PAT 1118) Birds in Forest (并查集)
查看>>
数据结构 拓扑排序
查看>>
(PAT 1040) Longest Symmetric String (DP-最长回文子串)
查看>>
(PAT 1145) Hashing - Average Search Time (哈希表冲突处理)
查看>>
(1129) Recommendation System 排序
查看>>
PAT1090 Highest Price in Supply Chain 树DFS
查看>>