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 相关文章推荐
JavaScript中常见陷阱小结
Apr 27 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
Angular的MVC和作用域
Dec 26 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
vue debug 二种方法
Sep 16 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 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函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
图片按比例缩放函数
2006/06/26 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
英文求职信结束语大全
2013/10/26 职场文书
初中科学教学反思
2014/01/21 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
幼儿园个人总结
2015/02/28 职场文书
计算机实训心得体会
2016/01/14 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python