Ajax的概述与实现过程


Posted in Javascript onNovember 18, 2016

一、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);
 }
 };

 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—服务不可用

关于服务器响应码,详情请看————网络传输协议(http协议)

以上就是本文的内容,有需要的可以看下,希望对大家有所帮助。谢谢对三水点靠木的支持!

Javascript 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
简单谈谈ES6的六个小特性
Nov 18 #Javascript
jQuery post数据至ashx实例详解
Nov 18 #Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 #Javascript
基于jQuery的checkbox全选问题分析
Nov 18 #Javascript
JavaScript动态数量的文件上传控件
Nov 18 #Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 #Javascript
Node.js 实现简单小说爬虫实例
Nov 18 #Javascript
You might like
php 计划任务 检测用户连接状态
2012/03/29 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python中常用的九种预处理方法分享
2016/09/11 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
金鑫耀Java笔试题
2014/09/06 面试题
金融管理应届生求职信
2014/02/20 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
北京导游词
2015/02/12 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
技术入股合作协议书
2016/03/21 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android