jQuery Ajax全解析

什么是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
 }
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • jquery ajax例子返回值详解

    在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get(). 首先我们看$.get(): 复制代码 代码如下: $.get("test.jsp", { name: "cssrain", time: "2008/01/21" }, //要传递的数据 function(data){ alert("返回的数据: " + data); } ) 然后看$.post(): 跟$.get()格式一样.

  • jquery实现ajax提交form表单的方法总结

    方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";                   alert($('#formAddHandlingFee').serialize());                $.ajax({                    type: "P

  • 使用Java实现类似Comet风格的web app

    开始     在本文中,我将展示如何使用各种不同的 Java 技术构建一些简单的 Comet 风格的 Web 应用程序.读者对 Java Servlet.Ajax 和 JavaScript 应该有一定的了解.我们将考察 Tomcat 和 Jetty 中一些支持 Comet 的特性,因此需要使用这两个产品的最新版本.本文使用 Tomcat 6.0.14 和 Jetty 6.1.14.另外还需要一个支持 Java 5 或更高版本的 JDK.本文使用 JDK 1.5.0-16.此外还需要看看 Jett

  • 详解Tomcat如何实现Comet

    详解Tomcat如何实现Comet

    Comet模式是一种服务器端推技术,它的核心思想提供一种能让当服务器端往客户端发送数据的方式.Comet模式为什么会出现?刚开始人们在客户端通过不断自动刷新整个页面来更新数据,后来觉得体验不好又使用了AJAX不断从客户端轮询服务器更新数据,然后是使用Comet模式由服务器端通过长连接推数据.Comet模式能大大减少发送到服务器端的请求从而避免了很多开销,而且它还具备更好的实时性. 如图所示,客户端发送一个请求到服务器,服务器接收了连接后一直保持住连接不关闭:接着客户端发送一个操作报文告诉服务器需

  • JavaScript数据推送Comet技术详解

    JavaScript数据推送主要致力于webapp的在线推送服务,不用我们每次都像服务器去发送Ajax请求而主动从Server端推送数据到本地. 数据推送进化史: 1. HTTP协议简易轮询,保持着一个链接不放,或者通过前端不停的向后端发送请求 2. H5更新后有了WebSocket大大改善了双向和单向推送数据的便利性 3. SSE(Server-Send Event):服务器推送数据的新方式 Comet:基于 HTTP 长连接的服务器推送技术 本课时介绍Comet:基于 HTTP 长连接的服务

  • 基于JQuery框架的AJAX实例代码

    index.html 复制代码 代码如下: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <script src="./js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(docum

  • 完美解决AJAX跨域问题

    从AJAX诞生那天起,XMLHttprequest对象不能跨域请求的问题就一直存在.这似乎是一个很经典的问题了.是由于javascript的同源策略(这里不作深入探讨)所导致. 解决的办法,大概有如下几种: 1. 使用中间层过渡的方式(可以理解为"代理"): 中间过渡,很明显,就是在AJAX与不同域的服务器进行通讯的中间加一层过渡,这一层过渡可以是PHP.JSP.c++等任何具备网络通讯功能的语言,由中间层向不同域的服务器进行读取数据的操作.拿asp.net做一个例子,如果需要对不同域

  • 页面间隔半秒钟更新时间 Asp.net使用Comet开发http长连接示例分享

    好处:1.和AJAX轮询比起来 节省资源,并且延迟小, 2.和webSocket比起来,适用的场景比较广泛. 1.先建立一个Asp.net MVC的空项目 添加一个控制器  (同样的代码在Asp.net WebForm中也是可以使用的) 复制代码 代码如下: public class CometController : Controller    {        public ActionResult Test()        {            Response.Buffer = f

  • Ajax和Comet技术总结

    Ajax是一种技术,一种能够向服务器请求额外的数据而无需卸载页面的技术,能够使网页具备更优的用户体验.Ajax技术的核心是XMLHttpRequest对象(XHR).本文从XHR开始谈起,理解Ajax技术的特点,再对跨域以及Comet等技术进行简要理解和总结. XMLHttpRequest基本用法 XHR对象有两个常用的方法open和send.open方法用户启动一个HTTP请求,不过它不会真的发送HTTP请求.open方法接收3个参数,分别表示请求的HTTP方法.请求的URL.是否异步.XHR

  • jQuery Ajax 全解析

    jQuery Ajax 全解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) :

  • jQuery Ajax全解析

    什么是Ajax Ajax基本概念 Ajax(Asynchronous JavaScript and XML):翻译成中文就是异步的JavaScript和XML. 从功能上来看是一种在无需重新加载整个网页的情况下能够更新部分网页的技术. 传统的网页 想要更新内容或者提交表单就要重新加载或刷新页面. 使用ajax技术的网页 通过后台服务器进行少量的数据交换,网页就可以实现异步局部跟新. Ajax出现前 Ajax技术出现之前,是一个同步交互的世界. 同步:客户端发出请求,服务端去处理,然后响应,这一段

  • Jquery ajax不能解析json对象，报Invalid JSON错误的原因和解决方法

    下面说一下,最近在使用jquery 1.4中使用$.ajax()方法解析json对象遇到的问题. Json对象是: 复制代码 代码如下: [{name:'二手房出售',infoCount:0,pageUrl:'/ershoufang'},{name:'二手房求购',infoCount:0,pageUrl:'/qiugou'},{name:'二手房装修',infoCount:0,pageUrl:'/esfzhuangxiu'},{name:'二手回收',infoCount:0,pageUrl:'/

  • jQuery插件开发全解析

    jQuery插件的开发包括两种:一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法.下面就两种函数的开发做详细的说明. 1.类级别的插件开发 类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法.典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中.关于类级别的插件开发可以采用如下几种形

  • jQuery Ajax 实例全解析

    jQuery Ajax 实例全解析

    废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (Map) : (可选参数) 发送至服务器的 key/value 数据. callback (

  • jQuery Ajax使用 全解析

    jQuery Ajax使用 全解析

    废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (Map) : (可选参数) 发送至服务器的 key/value 数据. callback (

  • jQuery+ajax读取并解析XML文件的方法

    jQuery+ajax读取并解析XML文件的方法

    本文实例讲述了jQuery+ajax读取并解析XML文件的方法.分享给大家供大家参考,具体如下: ajax.xml: <?xml version="1.0" encoding="UTF-8"?> <stulist> <student email="1@1.com"> <name>zhangsan</name> <id>1</id> </student>

  • jQuery使用ajax方法解析返回的json数据功能示例

    本文实例讲述了jQuery使用ajax方法解析返回的json数据功能.分享给大家供大家参考,具体如下: 最近在用jQuery的ajax方法传递接收json数据时发现一个问题,那就是返回的data数据,有时候可以直接作为json数据使用,可有时候又不行.查了些资料,解释如下: $.ajax({ url: ajaxurl, type: "POST", success: function(data){ //假设返回的json数据里有status及info2个属性 //有时候可以直接ajaxo

  • 基于jquery ajax的多文件上传进度条过程解析

    基于jquery ajax的多文件上传进度条过程解析

    这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> <meta name="viewport" content="width=device-width,initia

  • jquery Ajax 全局调用封装实例详解

    前言: 有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquer

随机推荐