Ajax的概述与实现过程

2024-10-02 17:59:36

一、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协议）

以上就是本文的内容，有需要的可以看下，希望对大家有所帮助。谢谢对我们的支持！

jstree创建无限分级树的方法【基于ajax动态创建子节点】

本文实例讲述了jstree创建无限分级树的方法.分享给大家供大家参考,具体如下: 首先来看一下效果页面加载之初节点全部展开后首先数据库的表结构如下其中Id为主键,PId为关联到自身的外键两个字段均为GUID形式层级关系主要靠这两个字段维护其次需要有一个类型 public class MenuType { public Guid Id { get; set; } public Guid PId { get; set; } public string MenuName { get; s
AJAX工作原理及优缺点详解

AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 一.ajax所包含的技术大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 使用CSS和XHTML来表示. 使用DOM模型来交互和动态显示. 使用XMLHttpRequest来和服务器进行异步通信. 使用javascript来绑定和调用. 在上面几中技术中,除了XmlHttpReq
使用Ajax生成的Excel文件并下载的实例

很久沒有寫文章啦,今天分享一個如何在ASP.NET MVC里使用Ajax下載生成文件的方法,以下只是個人心得: 大家都應該知道,在ASP.NET MVC里,如果通過Ajax調用后臺控制器時,可以返回一個JSON對象,但并不能直接返回文件(除非刷新頁面,那就不是Ajax啦),所以如果想用Ajax生成文件并下載的話,那只要將生成的文件先保存到服務器上,然後再將文件路徑通過JSON返回,之後才可以進行下載,當然由於是暫時性存放,所以當下載完后就需要馬上刪除相應的文件. 以下是做法以動態生成Excel為
PHP AjaxForm提交图片上传并显示图片源码

本文实例为大家分享了PHP AjaxForm提交图片上传并显示图片的具体代码,供大家参考,具体内容如下 PHP dofile.php 文件上传源码 <?php $file_upload = "upload/"; $file_allow_ext='gif|jpg|jpeg|png|gif|zip|rar|ppt|xls|pdf|pptx|xlsx|docx'; $file_allow_size = 5*1024*1024; if($_POST['submit']=="上传
浅析Ajax语法

Ajax是目前很普遍的一门技术,也是很值得探讨和研究的一门技术.本文将针对Ajax的发展过程并结合其在不同库框架中的使用方式来和大家分享下Ajax的那些新老语法. Ajax简介 Ajax全称为"Asynchronous Javascript And XML", 即"异步JavaScript和XML"的意思.通过Ajax我们可以向服务器发送请,在不阻塞页面的情况下进行数据交互,也可以理解为异步数据传输.在Ajax的帮助下我们的网页只需局部刷新即可更新数据的显示,减少了
AngularJS实现ajax请求的方法

本文实例讲述了AngularJS实现ajax请求的方法.分享给大家供大家参考,具体如下: [HTML 代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1"> &
Ajax读取txt并对txt内容进行分页显示功能

下文给大家分享了ajax读取txt并对txt内容进行分页显示的核心代码,废话不多说了,直接贴代码了. function TransferString(content) { var string = content; try{ string=string.replace(/\r\n/g,"<BR>") string=string.replace(/\n/g,"<BR>"); string=string.replace(/[ ]/g,"
在Thinkphp中使用ajax实现无刷新分页的方法

在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +---------------------------------------------------------------------- // | ThinkPHP [ WE CAN DO IT JUST THINK IT ] // +---------------------------------------------------------------
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

之前为了拍摄照片使用了webcam相关的插件,其拍摄后得到的是base64格式的图片,直接显示没问题,在src中直接指定就可以了,但是要上传到server时问题就来了,server端接收的是标准的文件,也就是html form中type="file"的形式.想要沿用这个接口不更改server端代码,于是尝试将base64直接转换成标准的fomeData并通过AJAX提交. 第一步,将base64转换成二进制图片(Blob) 主要思路是整理一下base64的前面几个字符,预处理以后转换成
AJAX请求队列实现

AJAX在使用的过程中会遇到一个问题,当用户短时间内执行了多个异步请求的时候,如果前一个请求没完成,将会被取消执行最新的一个请求,大多数情况下,不会有什么影响,例如请求了一个新的列表,旧的请求也就没什么必要了 ,但是,当我们的WEB程序需要同时异步调用多个请求,或者需要用户请求的是不同类型的数据,都需要执行完成的时候就出现问题了,于是,将用户的请求记录下来,并按顺序执行. 不同的浏览器,允许同时执行的线程不同,通常IE允许两个线程,于是,当同时执行的异步请求超过两个时,就会变成只执行最新的两个
JS 拦截全局ajax请求实例解析

你是否有过下面的需求:需要给所有ajax请求添加统一签名.需要统计某个接口被请求的次数.需要限制http请求的方法必须为get或post.需要分析别人网络协议等等,那么如何做?想想,如果能够拦截所有ajax请求,那么问题就会变的很简单!
Ajax的使用代码解析

Ajax 简介 Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式 . 通常不用刷新网页而与服务器通讯的方法: Flash 框架 Frameset:如果使用一组框架构造了一个网页,可以只更新其中一个框架,而不必惊动整个页面 X
jQuery插件ajaxFileUpload异步上传文件

ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://xiazai.jb51.net/201610/yuanma/ajaxfileupload(jb51.net).rar AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能
Ajax遍历jSon后对每一条数据进行相应的修改和删除(代码分享)

废话不多说了,直接给大家贴代码了,具体代码如下所示: $.ajax({ url: "/business/findpersons.json", dataType: "json", type:"GET", success: function(doc) { var objs=eval(doc); for (var i = 0; i < objs.length; i++){ var personid=objs[i].personId; var na

Ajax的概述与实现过程

相关推荐

随机推荐