Ajax 是什么? 如何创建一个 Ajax?
在上世纪90年代,几乎所有的网站都由HTML页面实现,服务器处理每一个用户请求都需要重新加载网页。用户体验极差!由于每次应用的沟通都需要向服务器发送请求,应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。
在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。
Google Suggest 使用 AJAX 创造出动态性极强的 web 界面:当您在谷歌的搜索框输入关键字时,JavaScript 会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。
Ajax简介
Ajax 并不算是一种新的技术,全称是 asynchronous javascript and xml,可以说是已有技术的组合,主要用来实现客户端与服务器端的异步通信效果,实现页面的局部刷新,早期的浏览器并不能原生支持 ajax,可以使用隐藏帧(iframe)方式变相实现异步效果,后 来的浏览器提供了对 ajax 的原生支持 使 用 ajax 原 生 方 式 发 送 请 求 主 要 通 过 XMLHttpRequest( 标 准 浏 览 器 ) 、 ActiveXObject(IE 浏览器)对象实现异步通信效果
ajax是基于现有的Internet标准,并且联合使用它们:
- XMLHttpRequest 对象 (异步的与服务器交换数据)
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)
Ajax优缺点
【1】优点
- 页面局部刷新,用户体验好。
- 异步通信,更加快的响应能力。
- 减少冗余请求,减轻了服务器负担;按需获取数据,节约带宽资源。
- 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序
【2】缺点
ajax
干掉了back
按钮和加入收藏书签功能,即对浏览器后退机制的破坏。- 存在一定的安全问题,AJAX 暴露了与服务器交互的细节。
- 对搜索引擎的支持比较弱。
- 破坏了程序的异常机制。
- 无法用
URL
直接访问
创建Ajax的步骤
Ajax
的原理简单来说通过XmlHttpRequest
对象来向服务器发异步请求,从服务器获得数据,然后用javascript
来操作DOM
而更新页面。这其中最关键的一步就是从服务器获得请求数据ajax过程:
- 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
- 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
- 设置响应 HTTP 请求状态变化的函数
- 发送 HTTP 请求
- 获取异步调用返回的数据
- 使用 JavaScript和 DOM 实现局部刷新
【1】创建XMLHttpRequest
XMLHttpRequest 是 AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
var xhr;
if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xhr = new XMLHttpRequest();
} else {// IE6, IE5 浏览器执行代码xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
【2】向服务器发送请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
方法 | 描述 |
open(method,url,async) |
规定请求的类型、URL 以及是否异步处理请求。 1、method:请求的类型;GET 或 POST 2、url:文件在服务器上的位置 3、async:true(异步)或 false(同步) |
send(string) |
将请求发送到服务器。 1、string:仅用于 POST 请求 |
// 一个简单的get请求
xhr.open("GET","ajax_info.txt",true);
xhr.send();// 一个简单的post请求
xhr.open("POST","/try/ajax/demo_post.php",true);
xhr.send();
【3】处理服务器响应
当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
方法 | 描述 |
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status |
200: "OK" 404: 未找到页面 |
xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){console.log(xhr.responseText); // responseText获取字符串形式的响应数据 responseXML获取XML形式的响应数据}
}
Ajax实例
【1】原生Ajax请求
<!DOCTYPE html>
<html><head><meta charset="utf-8">
</head><body><div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div><button type="button" onclick="loadXMLDoc()">修改内容</button><script>function loadXMLDoc() {var xhr;if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xhr = new XMLHttpRequest();}else {// IE6, IE5 浏览器执行代码xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {document.getElementById("myDiv").innerHTML = xhr.responseText;}}xhr.open("GET", "/try/ajax/ajax_info.txt", true);xhr.send();}</script></body></html>
【2】jQuery封装Ajax请求
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head><body><div id="myDiv"><h2>使用 jQuery AJAX 修改文本内容</h2></div><button>修改内容</button><script>$(document).ready(function () {$("button").click(function () {htmlobj = $.ajax({type: "GET",url: "/jquery/test1.txt",data: {},dataType: "json",async: false,success: function (data) {$("#myDiv").html(data);}});});});</script></body></html>
Ajax 是什么? 如何创建一个 Ajax?相关推荐
- ajax搜索思路,jquery创建一个ajax关键词数据搜索实现思路
在web开发过程当中,我们经常需要在前台页面输入关键词进行数据的搜索,我们通常使用的搜索方式是将搜索结果用另一个页面显示,这样的方式对于搭建高性能网站来说不是最合适的,今天给大家分享一下如何使用 jq ...
- Ajax 是什么? 如何创建一个Ajax?
转自:http://blog.csdn.net/lxcao/article/details/52745743 题目点评 Ajax 是在工作中是必用的技术,在面试中十有八九会问的,答题的思路最好先回答原 ...
- ajax请求数据用于另一个ajax,在另一个AJAX请求中使用数据
我正在学习ruby,但是我正需要一些JS/JQuery来处理一个我正在和朋友一起工作的小项目.我们正在使用Last.fm API,并试图构建一个页面,我们将从两个不同的URL调用Json数据.在另一个 ...
- jQuery Howto: 如何快速创建一个AJAX的加载的图片效果
开发过AJAX的朋友都可能需要自己生成"加载中"的图片显示效果,用来提示用户当前操作正在处理中.这里GBin1.com提供一个快速的方法生成这种效果. 你只需要使用ajaxStar ...
- ajax第一个例子,第一个ajax例子【ajax有哪几种啊,了解的指导哈】
Ajax小例:登陆时验证用户是否存在,使用AJAX验证,无刷新 如果登陆成功则跳转到一个分页列表页面,使用AJAX实现分页效果 Action内的代码: //返回该登陆页面,并予以错误提示信息 resp ...
- ajax的auto是true,一个AJAX自动完成功能的js封装源码[支持中文]
Screenshots Pagination Internationalization Rich format Text selection源码下载 有个问题,等高手解决,就是怎么搞都不能支持中文,不 ...
- 写一个ajax框架,自己写的一个ajax框架,希望大家多提意见
/** ajax_frame.js Ajax Frame Version 1.0 */ function ajax_frame() { var config ...
- php 判断用户是否刷新,如何在php和ajax中创建一个注册页面,它会在不刷新页面的情况下检查某个用户名是否已经存在? - php...
我有一个register.php文件,它为我的网站创建了新用户.但是,如果某人使用已经存在的用户名,则仅当他输入整个表单并提交时才会生成错误.如何实现Ajax / Jquery以在不提交表单的情况下显 ...
- ajax通讯原理,ajax通讯原理以及自己封装一个ajax函数
ajax通讯原理 要解释ajax的原理,需要从旧的交互方式开始,当用户触发一个http请求到服务器,服务器对其进行处理之后,再返回一个新的html页到客户端,每当服务器处理客户端提交的请求时,客户都只 ...
最新文章
- mysql 5.7开启并行复制
- 神经网络的反向传播(BP)是什么?sigmoid函数的导数是什么,有什么形式优势、优缺点?
- SAP Return to External Vendor
- Android 内存管理 amp;Memory Leak amp; OOM 分析
- 变电站越级跳闸的几大原因(转载)
- 邵阳学院学校云认证码_湖南所有五年制大专学校
- ubuntu安装python3.6_如何在Ubuntu19.04上安装Python3.6?
- CSP-S初赛知识点复习(全)
- [蓝桥杯][算法提高VIP]开灯游戏-dfs
- 浅析 Linux 初始化系统(系统服务管理和控制程序/Init System) -- sysvinit/systemvinit(System V init)
- 重学TCP协议(3) 端口号及MTU、MSS
- python Exception(异常处理)
- python编译为机器码_通过 GraalVM 将 Java 程序编译成本地机器码!
- java导出服务器已经配置好的excel模板
- Net设计模式实例之观察者模式(Observer Pattern)
- zoj 3620 Escape Time II dfs
- Linux下如何修改ini文件,如何修改Boot.ini文件,重新引导Linux!
- 初学java socket编程实例代码讲解
- 台式计算机如何自动关机,台式电脑如何设置定时关机
- 【数据库系统原理】第四章 高级数据库模型:统一建模语言UML、对象定义语言ODL