Ajax的概述与实现过程
一、ajax概述
1、Ajax是Asynchronous([ə'sɪŋkrənəs) JavaScript XML的简写,不是一门新技术,而是对现有技术的综合利用。这一技术能够向服务器请求额外数据而无需刷新页面,带来了更好的用户体验
2、Ajax技术的核心是XMLHttpRequest对象(简称XHR),这是由微软首先引入的一个特性。在XHR出现之前,Ajax式的通信必须借助一些hack手段来实现,大多数是使用隐藏的框架或内嵌框架。
3、XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步的方式从服务器取得更多的信息,意味着用户单击后,可以不必刷新页面也能获取新数据。也就是说可以使用XHR对象取得新数据,然后再通过DOM将新数据插入到页面中
4、虽然Ajax名字中有XML的成分,但是呢,Ajax通信与数据格式无关,这种技术就是无须刷新页面即可从服务器取得数据,但不一定是XML数据
二、操作:原生ajax和jQuery中封装的ajax
1、原生ajax:
ajax作用:发送请求(设置请求setRequest) 接收响应(getResponse)
A、ajax原生方式发送请求:
Ajax中最重要也是最固定的部分就是http请求。
1) 建立连接: (IE7及以上版本都支持XMLHttpRequest)
var xhr = new XMLHttpRequest(); //创建异步请求对象
2) Get请求:格式必须是(url?name1=value1&name2=value2)
xhr.open("get","01-register.php?name="+name);//初始化异步get请求
xhr.send(null); //与服务器建立连接
3) Post请求
xhr.open('post','01-XMLHTTPRequest-test.php');//请求报文行
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post请求设置请求头*/
xhr.send('name=rose&age=20'); //请求报文体
4) get和post请求的区别:
★get不需要设置请求头,而post需要设置请求头
★get的数据传递通过url进行,而post的数据在send方法中传递
B、ajax原生方式接收响应:
/*监听服务器的响应*/
xhr.onreadystatechange=function(){
/*判断当前的响应是否成功 1.服务器做出了响应 2.响应的结果是正确的*/
if(xhr.status==200 && xhr.readyState==4){
var result=xhr.responseText;
console.log(result); //输出从服务器中获取到的数据
//接下来就可以对数据进行相应的处理了
}
};
C、处理响应数据:
/*监听*/
xhr.onreadystatechange=function(){
if(xhr.status==200 && xhr.readyState==4){ /*判断状态*/
var result;
/*获取响应报文中的Content-Type*/
var ct=xhr.getResponseHeader("Content-Type");
/*判断Content-Type,进行数据的解析*/
if(ct.indexOf("xml") != -1){
result=xhr.responseXML;
}
else if(ct.indexOf("json") !=-1){
result=JSON.parse(xhr.responseText);
}
else{
result=xhr.responseText;
}
/*调用回调函数--委托--代理*/
success && success(result);
}
};
2、jQuery中封装的ajax
$.ajax({
type: 请求方式(get/post),
url: "register.php",
data: 发送请求数据,
beforeSend:function(){返回false可以取消本次ajax请求},
success:function(result){ 成功响应后调用 },
error:function(err){ 错误响应时调用 },
complete:function(){ 响应完成时调用(包括成功和失败) }
});
jQuery中提供了专门的方法来序列化表单:
$('form').serialize(): //序列化表单(即格式化key=val & key=val);
三、响应
我们需要监听服务器的响应状态,然后对从服务器中获取的数据做相应的处理。
1) onreadystatechange是JavaScript事件中的一种,用于监听XMLHttpRequest的状态
2) readystate:响应状态,返回XMLHTTP请求的当前状态
readyState 状态 |
状态说明 |
(0)未初始化 |
此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在,否则浏览器会报错--对象不存在。 |
(1)载入 |
此阶段对XMLHttpRequest对象进行初始化,即调用open()方法,根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。 |
(2)载入完成 |
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。 |
(3)交互 |
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式,为在客户端调用作好准备。状态3表示正在解析数据。 |
(4)完成 |
此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示数据解析完毕,可以通过XMLHttpRequest对象的相应属性取得数据。 |
3) status:服务器的响应码
常见响应码:200—服务器成功返回网页
404—请求网页不存在
503—服务不可用
关于服务器响应码,详情请看————网络传输协议
Ajax的概述与实现过程的更多相关文章
- AJAX异步请求原理和过程
AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方法. AJAX 基于 JavaS ...
- MapReduce概述,原理,执行过程
MapReduce概述 MapReduce是一种分布式计算模型,运行时不会在一台机器上运行.hadoop是分布式的,它是运行在很多的TaskTracker之上的. 在我们的TaskTracker上面跑 ...
- ajax用beforeSend自定义请求过程中客户端事件,提高用户体验
本文为博主原创,未经允许不得转载: 在应用ajax的过程中,当我们再前台提交请求的时候,如果服务端响应事件比较长,就会导致需要等很长时间在前台才能接受到服务端返回的 响应结果,往往会导致用户重复点击按 ...
- JSON(及其在ajax前后端交互的过程)小识
一. json介绍 json是一种轻量级的数据交换格式,规则很简单: 并列的数据之间用逗号(,)分隔: 映射用冒号(:)表示: 并列数据的集合(数组)用方括号([])表示: 映射的集合(对象)用大括号 ...
- AJAX进行数据交互的过程
AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML). 是指一种创建交互式网页应用的网页开发技术. 通过在后台与服务 ...
- asp.net DropDownList无刷新ajax二级联动实现详细过程
只适合新手制作DropDownList无刷新ajax二级联动效果: 数据库实现,添加两表如图:表1,pingpai,表2,type,具体数据库实现看自己的理解: //页面主要代码: <asp:S ...
- ajax实现异步请求的过程
var xhr; xhr = new XMLHttpRequest(); //创建一个异步对象 xhr.open("Get", "test.a ...
- Kakfa概述及安装过程
一.概述 1. Kafka是由LinkedIn(领英)开发的一个分布式的消息系统,最初是用作LinkedIn的活动流(Activity Stream)和运营数据处理的基础 a. 活动流数据包括页面访问 ...
- java jvm概述及工作过程中的内存管理
java jvm 有分层的思想. java类..java文件,源文件,源代码,源程序 编译器不能把源代码直接编译成0101,除非是java语言写的操作系统. windows认识的可执行文件 ...
随机推荐
- hdu 1520 (树形DP)
dp[i][0]表示i不参加 dp[i][1]表示i参加 简单的树形dp #include<stdio.h> #include<string.h> #define N 6100 ...
- <property name="current_session_context_class">thread</property> 属性
<property name="current_session_context_class">thread</property>这个属性的作用:这样配置是本 ...
- 转载:iPhone 6 Plus 屏幕宽度问题 375 vs 414
首先看一张比较简单明了的 iPhone 6 与 iPhone 6 Plus 对比图,来自 PaintCode 的<The Ultimate Guide To iPhone Resolutions ...
- UART与USART的差别
UART与USART都是单片机上的串口通信,他们之间的差别例如以下: 首先从名字上看: UART:universal asynchronous receiver and transmitter通用异步 ...
- 从零开始学android开发-获取TextView的值
昨日写一个Android Demo,逻辑大概是从TextView获取其中的值,然后处理后再放回TextView中.整个处理过程是由一个Button的OnClick触发的. 可是在调试的过程中,一点击B ...
- Codeforces Round #325 (Div. 2) B. Laurenty and Shop 前缀和
B. Laurenty and Shop Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/586/p ...
- 【甘道夫】HBase基本数据操作的详细说明【完整版,精绝】
介绍 之前具体写了一篇HBase过滤器的文章.今天把基础的表和数据相关操作补上. 本文档參考最新(截止2014年7月16日)的官方Ref Guide.Developer API编写. 全部代码均基于& ...
- iOS开发——数据持久化Swift篇&iCloud云存储
iCloud云存储 import UIKit class ViewController: UIViewController { override func viewDidLoad() { super. ...
- SOAP 及其安全控制--转载
原文地址:http://my.oschina.net/huangyong/blog/287791 目录[-] 1. 基于用户令牌的身份认证 2. 基于数字签名的身份认证 3. SOAP 消息的加密与解 ...
- Distributed locks with Redis--官方
原文:http://redis.io/topics/distlock Distributed locks with Redis Distributed locks are a very useful ...