Ajax( Asynchronous JavaScript and XML)

在 Ajax 中 Asynchronous 是指异步, 代表 客户端(Client 通常是指浏览器) 可以向服务器(Server) 发出请求 用户无须等待相应。 异步是 Ajax 技术的核心所在。

Ajax 只是一个概念,用来描述 客户端XMLHTTPRequest 与服务器 Server 脚本之间的交互。

Question : 怎样确定何时应该使用 异步技术呢?

你可以这样考虑, 如果你希望 你的用户能在工作的同时 继续做一些处理, 可能就需要一个 异步的请求。

如果你的用户在 继续操作之前需要 从你的应用得到某些信息或者得到一个 相应,那就要让用户等待,通常是一个同步请求。

关于 XMLHTTPRequest : 

Ajax 中技术的主要实现 是通过 XMLHTTPRequest 这个对象来实现的, XMLHTTPRequest 是大多数浏览器对 请求对象的 叫法。

1.首先需要认识到的是 XMLHTTPRequest 是一个对象 (object) , 和所有对象一样,也有 属性 (property) 和方法 (method)

  eg : onreadystatechange 是XMLHTTPRequest 最重要的属性, 通常把这个属性设置为一个函数名把这个函数称为 回调函数(callback function)

     request.onreadystatechange = function_name;  此处是 函数引用 而不是 函数调用, 我们使用回调函数处理服务器返回的数据。

2.然后,在各种浏览器中 XMLHTTPRequest 对象的实例化和处理方法是不同的,浏览器通过把 XMLHTTPRequest 发送到服务器

并且从服务器得到相应(Response)而且无需加载整个页面。

function createRequest() {
try {
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;
}

你可以通过 自定义的 createRequest() 创造一个各种浏览器通用的request.

建立 Ajax 请求的基本过程:

1. 得到一个请求对象(XMLHTTPRequest), 我们可以用过上述方法 createRequest() 来得到这个对象的一个实例(instance),如果不支持 Ajax 会返回null

2. 配置请求对象 XMLHTTPRequest 的属性,(例如要 连接哪个 URL, 使用 GET or POST)需要在向服务器 发出请求之前完成所有这些配置。

3. 设置回调函数, request.onreadystatechange = function_name; 告诉浏览器当服务器返回响应的时候应该做什么

4. 发出请求。

 

使用 Ajax的更多相关文章

  1. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  2. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  3. 一个粗心的Bug,JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  4. ABP文档 - Javascript Api - AJAX

    本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...

  5. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  6. 调用AJAX做登陆和注册

    先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...

  7. Ajax 概念 分析 举例

    Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...

  8. ajax

    常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...

  9. 学习笔记之MVC级联及Ajax操作

    由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...

  10. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

随机推荐

  1. Java学习笔记——集合

    类集简介 从JDK1.2开始Java引入了类集开发框架,所谓的类集指的就是一套动态对象数组的实现方案,在实际开发之中没有有何一项开发可以离开数组,但是传统的数组实现起来非常的繁琐.而且长度是其致命伤, ...

  2. 夜色的 cocos2d-x 开发笔记 02

    本章我们让飞机发射子弹,因此我们要写这样一个方法 子弹资源:欢迎下载 很详细的注释吧,现在有几个地方报错,.h文件里面一定要先声明 这里是本章所有的新方法,你可以一次声明全部,嗯,还有个报错应该是我们 ...

  3. lucene的使用与优化

    1 lucene简介1.1 什么是luceneLucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来就能用,它只是提供了一种工 ...

  4. MySQL子查询有哪五种形式?

    MySQL是一个关系型数据库管理系统,由瑞典MySQLAB公司开发,目前属于Oracle旗下产品.MySQL是最流行的关系型数据库管理系统之一,在web应用方面,MySQL是最好的RDBMS(Rela ...

  5. 使用SSH密钥方式登录ubuntu Linux,指令(ssh-keygen 和 ssh-copy-id)

    实验目的 从myVM1(本地主机)上登录myVM2(远程主机).采用密钥方式,不输入密码. 测试环境 主机:window7 sp1 64位 专业版 虚拟机:VMware workstation 12 ...

  6. April 3 2017 Week 14 Monday

    Don't worry about finding your soul mate. Find yourself. 欲寻佳侣,先觅本心. You may fail to find your soul m ...

  7. JS正则表达式(RegExp)

    字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在.比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@前后的子串,再分别判断是否是单词和域名,但这样做不但麻烦, ...

  8. Docker和宿主机操作系统文件目录互相隔离的实现原理

    我们知道在Docker容器里是无法访问到宿主操作系统的文件目录的,但这种隔离是怎么实现的呢? 其实一点也不神奇--利用了Linux系统的内部命令chroot. chroot能将进程的根目录设置成任意指 ...

  9. Android(java)学习笔记64:Android权限大全

    访问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES读取或写入登记check-in数据库属性表的权限 获取错略位置 android.permissio ...

  10. 2018.7.27 Json与Java相互转换

    Json.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" page ...