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 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
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
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
js中判断控件是否存在
2010/08/25 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
python GUI实例学习
2017/11/21 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
django rest framework使用django-filter用法
2020/07/15 Python
浅析python实现动态规划背包问题
2020/12/31 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
房地产开盘策划方案
2014/02/10 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
浅谈MySQL函数
2021/10/05 MySQL
MySQL数据库表约束讲解
2022/06/21 MySQL