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 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
Javascript执行流程细节原理解析
May 14 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 Image Resize图片大小调整的函数代码
2011/01/17 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
原生js实现分页效果
2020/09/23 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
python使用matplotlib绘制柱状图教程
2017/02/08 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
浅析python标准库中的glob
2020/03/13 Python
用python实现一个简单的验证码
2020/12/09 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
canvas像素画板的实现代码
2018/11/21 HTML / CSS
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
Java提供了哪些企业应用编程接口
2015/02/13 面试题
人力资源管理专业学生自我评价
2013/11/20 职场文书
小学运动会通讯稿
2015/07/18 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
python 实现图片特效处理
2022/04/03 Python
Elasticsearch 数据类型及管理
2022/04/19 Python