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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
js字符串转成JSON
Nov 07 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
jQuery实现日历效果
Sep 11 jQuery
用vue写一个日历
Nov 02 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
简单谈谈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函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
php查看当前Session的ID实例
2015/03/16 PHP
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
详解jQuery事件
2017/01/13 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
使用Python的内建模块collections的教程
2015/04/28 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
Python实现控制台输入密码的方法
2015/05/29 Python
pycharm设置注释颜色的方法
2018/05/23 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
用python实现刷点击率的示例代码
2019/02/21 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
keras多显卡训练方式
2020/06/10 Python
python实现简单遗传算法
2020/09/18 Python
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
百日安全生产活动总结
2014/07/05 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
python实现监听键盘
2021/04/26 Python