【初窥javascript奥秘之Ajax】简述下你所知道的Ajax?

news/2024/6/20 1:44:34
【初窥javascript奥秘之Ajax】简述下你所知道的Ajax?

原文 http://www.cnblogs.com/yexiaochai/archive/2013/04/24/3037069.html

【初窥javascript奥秘之Ajax】简述下你所知道的Ajax?

前言

ajax已经流行很多年了,现在来说它是否已经晚了呢???特别是有这样框架那样框架后,还有几个人认识原生ajax呢?我们每天都会用到的东西你到底对他了解吗?

在最近一次面试上不幸被问到了,原以为很熟悉的东西你会发现你对他根本不熟悉!要说熟悉AJAX的话你需要毫不犹豫回答以下问题:

1 不同浏览器下ajax实现上的差异
2 一次ajax请求过程中有哪几种状态值,不同状态值之间含义是什么
3 ajax在跨域的情况下会出现什么状况,以及解决方案
4 ajax和后台数据交互时会有什么编码问题吗?
5 最后可以说说XMLHttpRequest2有什么新东西

怎么样?各位能轻易的答上以上4点,便可直接忽略此文,若是只能很含糊的说出1、2点的话,便硬着头皮看我这篇水文吧,呵呵。

由于本文是边写边实验的,所以可能会有点乱,也可能会有我的唧唧歪歪的思考过程,请各位见谅。

另外,本人水平还很浅,写的东西必定有问题,若是文中有任何错误以及不足,请请一定指出来,多谢!

ajax简介

水文还是要有水文的样子,我这里还是需要简单介绍一番:

ajax全称:Asynchronous JavaScript and XML 即传说中的“异步JavaScript和XML”,他是由html、js、Dom等组成,这一杰出的技术可以将笨拙的web界面变成交互性的ajax应用程序。

ajax是一种构建网站的强大方法,他让我们桌面上只剩一个浏览器的想法不再是空谈,不再是妄想,虽说不大可能。。。

曾经我们的页面需要等待,等待服务器响应,等待屏幕刷新,等待请求返回和生成新页面。ajax的出现就让web页面的等待变得不那么明显,虽说只是感觉罢了(跟和美女在一起似的,感觉很爽)。。。

在一般的web应用程序中,用户提交表单后将整个表单发送到服务器,服务器将它转发给后台脚步(.net,java,php),脚步执行结束后将生 成的新的htm页面返回,这个过程中就会出现我们前面所说的等待:屏幕变得一片空白,等待返回数据在重新绘制,这种交互性就跟你和一个美女XXOO每隔 10秒才能动一下似的,这种感受,这种交互性怎一个差字了得???

ajax基本就是把js对象XMLHttpRequest对象放在web表单和服务器之间,当用户提交数据时只是将数据提交给js,然后由js发送给服务器并获取返回数据修改页面,过程中不会出现闪烁、消失或者延迟,传说中的异步请求。。。

XMLHttpRequest

该js对象为ajax的核心,前面说过了XmlHttpRequest是一套可以在Javascript脚本语言中通过http协议传送或接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

首先我们来创建一个xml对象,需要注意兼容,我们先来个管中窥豹:

初始化

ajax的请求响应模型

ajax基本流程基本如下:

1 从web表单中获取所需数据(不用表单也行)
2 建立连接url
3 打开服务器连接
4 设置数据返回回调函数
5 发送请求
xmlHttp.open('GET', url, true);
xmlHttp.onreadystatechange = function (e) {};
xmlHttp.send(null)

open时,最后一个参数为true将建立异步连接,false将等待服务器响应

onreadystatechage 可以指定数据返回时回调函数

send便是发送请求,参数便是要传的参数,没有参数可以填null

我们来写段后台程序试试:

前端
复制代码
 1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2  
 3  <html xmlns="http://www.w3.org/1999/xhtml">
 4  <head>
 5      <title></title>
 6  </head>
 7  <body>
 8  
 9  </body>
10  <script type="text/javascript">
11      var xmlHttp = false;
12      function createXMLHttpRequest() {
13          if (window.XMLHttpRequest) {
14              try {
15                  xmlHttp = new XMLHttpRequest();
16              } catch (e) {
17                  xmlHttp = false;
18              }
19          } else {
20              try {
21                  xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
22              } catch (e) {
23                  try {
24                      xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
25                  } catch (ee) {
26                      xmlHttp = false;
27                  }
28              }
29          }
30      }
31  
32      createXMLHttpRequest();
33      if (xmlHttp) {
34          xmlHttp.open('GET', 'ajax.ashx', true);
35          xmlHttp.onreadystatechange = function (e) {
36              var tmp = xmlHttp.responseText;
37              var s = '';
38          }
39          xmlHttp.send();
40  
41      }
42      
43  
44      var s = '';
45  </script>
46  </html>
复制代码

 

服务器端代码
复制代码
 1 <%@ WebHandler Language="C#" Class="ajax" %>
 2 
 3 using System;
 4 using System.Web;
 5 
 6 public class ajax : IHttpHandler {
 7     
 8     public void ProcessRequest (HttpContext context) {
 9         context.Response.ContentType = "text/plain";
10         string name = context.Request.QueryString["name"] == null ? "" : context.Request.QueryString["name"].ToString();
11         context.Response.Write("ajax 返回:" + name);
12     }
13  
14     public bool IsReusable {
15         get {
16             return false;
17         }
18     }
19 
20 }
复制代码

其实我们定义的会函数会被执行三次,状态码依次返回2,3,4,现在我们来看看这个状态码是什么:

xmlHttp.readyState:
0 :未初始化,还没有调用send()方法 
1 :载入,已调用send()方法,正在发送请求 
2 :载入完成,send()方法执行完成,已经接收到全部响应内容 
3 :交互,正在解析响应内容 
4 :完成,响应内容解析完成,可以在客户端调用了

意思是我们只需要关注4便可以了。

另外几次请求返回数据一致可能是因为浏览器缓存原因,请各位自己加上随机数哟。

那些年我们一起跨的域

ajax也会遇到跨域问题的,我们所说的跨域现在一般都是跨域请求数据,跨域提交数据这种事情好像只有html5的postMessage能做。

跨域请求数据的原理是,我们先在我们的页面上定义一个js函数,然后以script的方式请求数据,数据返回的字符串便会调用我们定义的方法:

xmlHttp.open('POST', 'http://localhost:47389/html5%E5%92%8Ccss3/ajax.ashx', true);

将前面代码url处做一个修改后,请求就没有响应了,我们先看看这个url会输出什么:

跨域
复制代码
 1 <%@ WebHandler Language="C#" Class="ajax" %>
 2 
 3 using System;
 4 using System.Web;
 5 
 6 public class ajax : IHttpHandler {
 7     
 8     public void ProcessRequest (HttpContext context) {
 9         context.Response.ContentType = "text/plain";
10         context.Response.Write("Hello World");
11     }
12  
13     public bool IsReusable {
14         get {
15             return false;
16         }
17     }
18 
19 }
复制代码

我们修改下后台代码:

修改后
复制代码
 1 <%@ WebHandler Language="C#" Class="ajax" %>
 2 
 3 using System;
 4 using System.Web;
 5 
 6 public class ajax : IHttpHandler {
 7     
 8     public void ProcessRequest (HttpContext context) {
 9         context.Response.ContentType = "text/html";
10         string callback = context.Request.QueryString["callback"] == null ? "callback" : context.Request.QueryString["callback"].ToString();
11         context.Response.Write(callback + "();");
12     }
13  
14     public bool IsReusable {
15         get {
16             return false;
17         }
18     }
19 
20 }
复制代码

如此便会返回callback字符,

其实,说到异步跨域问题,我感觉就和ajax关系不大了,我想的是这样做:

跨域后台
跨域前台

如此一来,便跨域了!

针对跨域post的处理,一般是以form target指向一个隐藏的iframe实现的,比如我们最初的文件图片上传“ajax”的实现。

编码问题

若是页面采用utf-8编码,而服务器采用gbk的话,也许会出现编码问题,甚至引起莫名其妙的BUG:

这里便让中文不能解析。

HTML5中的XMLHttpRequest

老版本缺点:
只支持文本数据的传送,无法用来读取和上传二进制文件。
传送和接收数据时,没有进度信息,只能提示有没有完成。
受到"同域限制"(Same Origin Policy),只能向同一域名的服务器请求数据。
复制代码
2.0改进
可以设置HTTP请求的时限。 可以使用FormData对象管理表单数据。 可以上传文件。 可以请求不同域名下的数据(跨域请求)。 可以获取服务器端的二进制数据。 可以获得数据传输的进度信息。
复制代码

作为XMLHttpRequest的改进版,IE9都还不支持呢,估计最新的IE10应该没问题了。

XMLHttpRequest Level2 在功能上有了很大的改进,比如2.0版本可以跨域啦!!!

跨域http请求包含一个origin头部,他为服务器提供http请求源信息,头部由浏览器保护,不能被程序更改,从本质上讲他与跨文档消息通信中消息事件的origin属性作用相同。

origin头部不同于早先的refer,后者referer是一个包含路径的完整url,路由可能包含敏感信息,浏览器不一定发送referer,但一定会发送origin。

算了,以上这块是抄的,我完全没有概念,反正意思是按照他的规则玩游戏,你就可以跨域!

我这里想要表达的重点其实是以下功能点:

XMLHttpRequest2.0支持了对进度的响应!确实是进度的响应,他让我们上传文件产生进度条变成了可能,之前仅有readystatechage一个事件能给用来响应进度,而且该事件并不兼容,如ie中就不会有状态3,更别说上传通信了,这种情况下要实现进度条是一件无比麻烦的事情:

我们来看看现在的事件列表

复制代码
loadStart
传输开始时触发
progress 上传过程中触发,他的e属性会包含很多有用信息哦。
abort 取消上传时触发
error 出错时触发
load 接受完数据触发
loadend
传输结束触发,无论成功与否
复制代码

若想查看例子请猛击: 一次上机面试题带来的感悟【学习的感觉、学习的方法】

此段参考资料:XMLHttpRequest Level 2 使用指南

结语

今天,我们一起学习了AJAX的相关知识,我感觉还是挺有用的。。。。若是有任何错误请指出哦。

如果你觉得这篇文章还不错,请帮忙点击一下推荐,谢谢!

posted on 2013-04-24 20:23 NET未来之路 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/archive/2013/04/24/3040893.html


https://dhexx.cn/news/show-18663.html

相关文章

linux 退出命令输入密码,linux终端中输入什么指令可以退出终端?

linux系统自带的是vi编辑器&#xff0c;在使用vim还得安装redhat/debian/fedora用yum install vim命令&#xff0c;debian/ubutnu/ubuntukylin用sudo apt-get install vim&#xff0c;两种方法都得用root权限安装。具体如下&#xff1a;1、简介Linux操作系统是基于UNIX操作系统…

[复变函数]第17堂课 5 解析函数的 Laurent 展式与孤立奇点 5. 1 解析函数的 Laurent 展式...

0. 引言 (1) $f$ 在 $|z|<R$ 内解析 $\dps{\ra f(z)\sum_{n0}^\infty c_nz^n}$ (Taylor 级数). (2) $f$ 在 $r<|z|<R\ (0\leq r<R\leq\infty)$ 内解析 $\dps{\ra f(z)?}$ (Laurent 级数). 1. 双边幂级数 (1) 定义 $$\bee\label{15_bs} \bea &\quad c_0c_…

ElasticSearch 搜索引擎入门到实战 18-- query_string查询

query_string 查询&#xff0c;如果熟悉lucene的查询语法&#xff0c;我们可以直接⽤lucene查询语法写⼀个查询串进⾏查询&#xff0c;ES中接到请求后&#xff0c;通过查询解析器,解析查询串⽣成对应的查询。 指定单个字段查询 POST /nba/_search {"query": {"…

linux删除del后缀文件,Linux_dos 文件删除 del命令,del命令的用法很简单,使用 de - phpStudy...

dos 文件删除 del命令del命令的用法很简单&#xff0c;使用 "del 文件路径" 的格式就可以了。比如&#xff0c;想删除D盘根目录下的test.txt&#xff0c;使用del d:\test.txt即可。但是&#xff0c;并不是所有的文件都可以只用del命令就可以搞定&#xff0c;比如具有…

在线教程

java 知识体系 http://gdkmrjxh.blog.163.com/blog/static/1746672662010111005955258/ java基础教程 http://www.51zxw.net/list.aspx?cid380 转载于:https://www.cnblogs.com/ygm900/archive/2013/04/25/3042391.html

String,StringBuffer与StringBuilder的理解

String 字符串常量StringBuffer 字符串变量&#xff08;线程安全&#xff09;StringBuilder 字符串变量&#xff08;非线程安全&#xff09; 简 要的说&#xff0c; String 类型和 StringBuffer 类型的主要性能区别其实在于 String 是不可变的对象, 因此在每次对 String 类型进…

emacs自动补全插件auto-complet和yasnippet,安装、配置和扩展

这段时间突然闲了起来&#xff0c;就又折腾折腾emacs. 一直想解决自动补全的功能&#xff0c;因为这时现代开发环境必备的特色。google了一下&#xff0c;很多使用auto-complete和yasnippet的&#xff0c;于是自己动手装了起来。先查阅安装文档&#xff0c;又参考别人的方法&am…

linux命令chcon,selinux --chcon命令

//If you want to setup a directory where you can upload files&#xff1c;如果你想让你设置的FTP目录可以上传文件的话&#xff0c;SELINUX需要设置&#xff1e; chcon -t public_content_rw_t /var/ftp/incoming//You must also turn on the boolean allow_ftpd_anon_writ…

ElasticSearch 搜索引擎入门到实战 19-- 索引别名的使用

别名有什么⽤ 在开发中&#xff0c;随着业务需求的迭代&#xff0c;较⽼的业务逻辑就要⾯临更新甚⾄是重构&#xff0c;⽽对于es来说&#xff0c;为了适应新的业务逻辑&#xff0c;可能就要对原有的索引做⼀些修改&#xff0c;⽐如对某些字段做调整&#xff0c;甚⾄是重…

004.CleanUp方法

定义&#xff1a; Delphi procedure CleanUp; 类型 可见性 所在源码 所在单元 父类 procedure protected System.RegularExpressionsCore.pas System.RegularExpressionsCore TPerlRegEx 描述&#xff1a; 在之前匹配完毕之后进行清理。 CleanUp方法是个受保护的方法&…