jQuery Ajax全解析


Posted in Javascript onFebruary 13, 2017

什么是Ajax

Ajax基本概念

Ajax(Asynchronous JavaScript and XML):翻译成中文就是异步的JavaScript和XML。

从功能上来看是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。

传统的网页

想要更新内容或者提交表单就要重新加载或刷新页面。

使用ajax技术的网页

通过后台服务器进行少量的数据交换,网页就可以实现异步局部跟新。

Ajax出现前

Ajax技术出现之前,是一个同步交互的世界。

同步:客户端发出请求,服务端去处理,然后响应,这一段时间客户端是处在等待的状态,当服务端处理响应完成之后呢,客户端重新加载页面,如果中间信息错误那么客户端就会再次发起请求在此等待。

Ajax出现之后

Ajax出现之后世界变了 变成了异步的世界。

那我们为什么之前不使用异步呢,是因为之前少了一个对象XMLHttpRequest对象,在这个对象出现之前网页开发都是采用同步的方式,出现之后呢发现可以进行了异步的操作,这个对象是用于后台和服器之间进行数据交换,而且这个数据的交换不会重新加载整个页面,这种情况下呢实现了在不刷新页面的情况下对局部数据的更新,有了这个对象之后呢才有了Ajax的异步加载局部刷新。

Ajax的异步加载局部刷新功能的实现

1.首先第一个问题就是XHR这个对象怎么使用

1)先实例化一个XMLHttpRequest

var request = new XMLHttpRquest();

注意:现在大部分的浏览器都支持XMLHttpRequest对象和new这种方式,但是呢在IE6及以下版本的时代中呢XHR还只是ActiveXObject

解决方法:

Var request; 
If(window.XMLHttpRequest){ 
Reuest = new XMLHttpRequest(); 
}else{ 
Request = new ActiveXObject(“Microsoft.XMLHTTP”); 
}

2)请求:

在这之前我们来看一下什么事HTTP请求

是一种计算机通过网络进行通讯的规则。

是一种无状态协议,不保留连接的相关信息,

客户端向服务器发出请求,服务器响应,之后呢连接就被关闭

一个完整的HTTP请求有七个步骤

    A.建立TCP连接

    B.客户端向服务器发送请求的命令

    C.浏览器发送请求头信息

    D.服务器给出响应

    E.服务器发送应答头信息

    F.服务器向浏览器发送数据

    G.服务器关闭TCP连接

分开来看:HTTP请求分为四个部分

HTTP请求的方法和动作(get,pos)

正在请求的URL(请求地址)

请求头(包含客户端环境信息,身份验证信息等)

请求体,请求正文。

Get请求:一般用于信息获取(http默认求求方式)

Url传参属性和值都是可见的,对所发内容大小有限制 一般在2000个字符

get请求安全的说法是因为你请求一次和请求一万次效果是一样的不会对数据造成影响。

Post请求:一般用于服务器数据修改

对所发信息没有大小限制

HTTP响应有三部分

1)一个数字和文字组成的状态吗,用来显示请求是成功还是失败

2)响应头,和请求头信息一样包含很多信息,例如服务器类型,日期时间,内容类型和长度等

3)响应体,响应正文

HTTP响应状态吗由三位数字组成,首位数字定义了状态码的类型:

1xx:信息类,表示接收到浏览器请求,正在进一步处理

2xx:成功表示用户请求被正确接受

3xx:重定向,表示没有请求成功,客户必须采取进一步的动作

4xx:客户端错误,表示客户端请求有错误404NOTFound意味着请求中所引用的文档不存在

5xx:服务器错误,表示服务器不能完成对请求的处理

通过XMLHttpRequest发送请求

1.创建

var request = new XMLHttpRquest();

2.发送请求

两个方法:

open(method,url,async),Send(string)这两种方法可以将请求发送到服务器

Request.open(get,get.php,true)
Request.Send()
Request.open(post,post.PHP,true) 
Request.Send()
Request.open(post,post.php,true) 
Request.setRequestHeader(‘Content-Type','application/x-www-form-urlencoded') 
Request.send(“name=王二狗&sex=男”);

send()中的内容是要向后台传递的参数,在get请求是通过url传递参数,所以get中send()里面的内容可以省略,post方式中不能省略,省略了之后就是无意义的请求了

setRequestHeader是用来设置请求参数的类型,form

3.获取响应

responseText:获取字符串形式的响应式数据

responseXML:

Status和statusText:以数字和文本形式返回HTTP状态吗

getAllResponseHeader():获取所有的响应报头

getResponseHeader():查询相应中的某个字段的值

在响应返回成功时得到的通知,在实际操作中要监听

readyState属性的变化,他的变化代表着服务器相应的变化

0:表示服务器请求未初始化,open还没有被调用

1:服务器连接已经建立,open已经被调用

2:请求已经被接受,接收到头部信息

3:处理中,接收到相应主体

4:请求完成,并且响应完成

Var request=new XMLHttpRequest();
Request.open(get,url,true)
Request.send();
request.onreadyState=function(){
 If(request.readeyState===4&&request.Status===200){
 做一些事情 request.responseText
 }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
JS实现简易留言板特效
Dec 23 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
jQuery中 bind的用法简单介绍
Feb 13 #Javascript
jquery实现轮播图效果
Feb 13 #Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 #Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 #Javascript
简单实现js倒计时功能
Feb 13 #Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 #Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 #Javascript
You might like
Thinkphp开发--集成极光推送
2017/09/15 PHP
jQuery参数列表集合
2011/04/06 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
React实现全选功能
2020/08/25 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
老生常谈Python进阶之装饰器
2017/05/11 Python
Python实现按中文排序的方法示例
2018/04/25 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
python使用knn实现特征向量分类
2018/12/26 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
会计毕业生自荐书
2014/06/12 职场文书
师范生求职自荐信
2014/06/14 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
查摆问题整改措施
2014/10/24 职场文书
python - asyncio异步编程
2021/04/06 Python