Ajax 的用法
1、什么是 Ajax?
Ajax，英文名 Asynchronous JavaScript and XML，也就是异步的 JavaScript 和 XML。它不是一门新的语言，而是一种使用现有标准的新方法，可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容，而且不需要任何浏览器插件，只需要用户允许 JavaScript 在浏览器上执行。
2、Ajax 的工作原理
由上图我们可以看到，浏览器首先 创建一个 XMLHttpRequest 对象，然后将这个对象发送给服务器；服务器响应并封装一些数据回传给浏览器；浏览器接收到服务器的响应数据，根据数据做出相应的操作，比如更新页面内容等操作。
3、如何使用 Ajax?
①、创建 XMLHttpRequest 对象
②、编写状态响应函数
③、调用 open() 方法
④、发送请求 send()
下面我们通过一个简单的例子来模拟 通过 Ajax 来更新页面上的内容
第一步：首先新建一个 AjaxTest.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/AjaxTest.js"></script>//这里引用了 AjaxTest.js 文件
</head>
<body>
<div style="border:1px solid red;width:200px;height:200px;" id="mydiv"></div>
<input type="button" onclick="Ajax()" value="发送Ajax 请求改变内容" /> //定义点击事件 Ajax()
</body>
</html>
页面显示效果如下：
第二步：新建一个 formInfo.json 文件，里面存放将要更新的内容
{
"name":"ys",
"age":24
}
第三步：新建一个 AjaxTest.js 文件，编写 Ajax 代码
function Ajax(){
var xhr = null;
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==0 && xhr.status==200)
{
alert("请求未初始化");
}
if (xhr.readyState==1 && xhr.status==200)
{
alert("服务器连接已建立");
}
if (xhr.readyState==2 && xhr.status==200)
{
alert("请求已接收");
}
if (xhr.readyState==3 && xhr.status==200)
{
alert("请求处理中");
}
if (xhr.readyState==4 && xhr.status==200)
{
alert("请求已完成，且响应已就绪");
document.getElementById("mydiv").innerHTML=xhr.responseText;
}
}
xhr.open("GET","../json/fromInfo.json",true);
xhr.send();
}
当我们点击按钮，界面会更新为：
4、对 Ajax 各个步骤的解析
①、创建 XMLHttpRequest 对象
通常来说，所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。所以创建 XMLHttpRequest 对象可以直接这样
var xhr=new XMLHttpRequest();
但是老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象，并不支持 XMLHttpRequest 对象。所以我们这样创建：
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
那么综合起来，创建 XMLHttpRequest 对象的方法为：
var xhr = null;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr=new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
该对象的属性为：
上面的例子我们可以看到 XMLHttpRequest 对象为：
②、编写状态响应函数
状态响应函数也就是 onreadystatechange 事件
常见的 status 响应状态码：
③、调用 open() 方法
open(string method,string url,boolean asynch,String username,string password)
指定和服务器端交互的HTTP方法，URL地址，即其他请求信息；
method:表示http请求方法，一般使用"GET","POST".
url：表示请求的服务器的地址；
asynch：表示是否采用异步方法，true为异步，false为同步；
后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。
④、发送请求 send()
send(content)
向服务器发出请求，如果采用异步方式，该方法会立即返回。content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。
实际开发中，有很多开源的库已经给我们封装好了，我们直接用就行了。
1、jQuery 的 Ajax 请求：
$.ajax({
type : "post", //请求方式
url : "../json/fromInfo.json", //请求路径
data : "", //传输到服务器的数据
cache : false, //是否有缓存
async : false, //同步和异步，false 表示同步，默认为true
dataType : "json", //预期的服务器响应数据类型
beforeSend:function(xhr){
alert(xhr);
alert('发送前');
},
success:function(data,textStatus,jqXHR){
alert(data); //json 文件中的数据，是一个 object 对象
alert(textStatus); //值为 success，表示成功状态码
alert(jqXHR); //这第三个参数封装响应的一些信息
document.getElementById("mydiv").innerHTML=jqXHR.responseText;
},
error:function(xhr,textStatus){
alert('错误');
alert(xhr);
alert(textStatus);
},
complete:function(){
alert('结束');
}
});
对上面相应参数的解析：
2、jQuery 的 get 请求
$.get(url,data,success(response,status,xhr),dataType)
说明：url为请求地址，data为请求数据的列表，callback为请求成功后的回调函数，dataType 为服务器返回数据类型。第四个参数 dataType，如果不写，默认返回字符串
$.get(
"../json/fromInfo.json",
"",
function(response,status,xhr){
alert(xhr.responseText);
},
"json"
);
3、jQuery 的 post 请求
$.post(url,data,success(response,status,xhr),dataType)
参数和 get 请求一样
Ajax 的用法的更多相关文章
- Ajax.ActionLink 用法
Ajax.ActionLink 用法 Ajax 属性的ActionLink方法可以创建一个具有异步行为的锚标签. ActionLink方法的第一个参数指定了链接文本,第二个参数是要异步调用的操作的名称 ...
- MVC学习十二：Ajax.ActionLink用法
Ajax.ActionLink用法 <!--使用Ajax.BeginForm必须引用的js文件--> <script type="text/javascript" ...
- 关于Jquery Ajax的用法
今天简单描述一下Jquery Ajax的用法,和我在使用过程中的一些看法,仅供自己娱乐和大家参考值之用! Jquery Ajax的重要性不言而喻,只从Jquery面世之后,终于解救了像我这种既做前台又 ...
- js进阶ajax基本用法（创建对象，连接服务器，发送请求，获取服务器传过来的数据）
js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据) 一.总结 1.ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法:open(),se ...
- ajax和springmvc的请求响应原理——深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法
1,四大重要部分: 请求链接 post请求和get请求 请求参数形式 响应内容形式 2,从springmvc的controller角度,controller能接收到请求的前提 请求链接必须对应 pos ...
- 深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法
当我们用javascript写ajax程序写得很“开心”的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码问 ...
- 详细解读Jquery的$.get(),$.post(),$.ajax(),$.getJSON()用法
一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第 ...
- jQuery中$.get、$.post、$.getJSON和$.ajax的用法
以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 一.jQuery中调用ajax的4种方法:$.get.$.post.$ge ...
- 理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法
ajax的4种方法:$.get.$.post.$getJSON.$ajax. 1.$.get $.get()方法使用GET方式来进行异步请求,它的语法结构为: $.get( url [, data] ...
- ajax实战用法详解
谦虚使人进步,总结使人提高! 以下5个方法执行一般Ajax请求的简短形式,在处理复杂的Ajax请求时应该使用jQuery.ajax() 1.load(url,[data],[callback])载入远 ...
随机推荐
- 读懂源码：一步一步实现一个 Vue
源码阅读:究竟怎样才算是读懂了? 市面上有很多源码分析的文章,就我看到的而言,基本的套路就是梳理流程,讲一讲每个模块的功能,整篇文章有一大半都是直接挂源码.我不禁怀疑,作者真的看懂了吗?为什么我看完后 ...
- codeforces 895B XK Segments 二分 思维
codeforces 895B XK Segments 题目大意: 寻找符合要求的\((i,j)\)对,有:\[a_i \le a_j \] 同时存在\(k\),且\(k\)能够被\(x\)整除,\( ...
- 如何生成CA证书
一般情况下,如果能找到可用的证书,就可以直接使用,只不过会因证书的某些信息不正确或与部署证书的主机不匹配而导致浏览器提示证书无效,但这并不影响使用.需要手工生成证书的情况有:找不到可用的证书需要配置双 ...
- CSS架构的优选和解决方案
背景 上周我厂前端小伙伴们开了一个技术交流会,关于如何优选CSS架构.解决掉平时写CSS时频繁出现的各种问题,这是前端人员老生常谈的问题,但却很少搬上台面,铺开正式地开交流会.这次会议,便是围绕CSS ...
- java多线程编程核心技术——第二章
第一节synchronized同步方法目录 1.1方法内的变量为线程安全的 1.2实例变量非线程安全 1.3多个对象多个锁 1.4synchronized方法与锁对象 1.5脏读 1.6synchro ...
- Tomcat 源码分析（一）——启动与生命周期组件
写在前面的话:读Tomcat源码也有段时间了,大领悟谈不上.一些小心得记录下来,供大家参考相护学习. 一.启动流程 Tomcat启动首先需要熟悉的是它的启动流程.和初学者第一天开始写Hello Wor ...
- Python笔记·第一章—— Python基础（一）
一.Python的简介 1.Python的由来与版本 1.1 python的由来 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文 ...
- 在Ubuntu14.04下安装Docker CE(1) - repository篇
从2017年3月开始,Docker开始分为社区版本和企业版,也就是Docker CE和Docker EE, 原来Ubuntu14.04下,通过sudo apt-get install docker.i ...
- 利用Photoshop减小照片景深
有时我们想拍出景深较小的照片,可是因为拍摄设备不支持,或者拍摄时没有调好參数,效果不理想. 这时能够借助Photoshop进行后期调整.一定程度上弥补缺陷.用到的主要是PS中的滤镜-->模糊-- ...
- HPUX 11.31 MC-SG SGeRAC配置
HPUX 11.31 MC-SG SGeRAC配置 环境: 系统版本号 hp-unix 11.3v2 1503 serviceguard extension版本号 T1907 实施 1. 磁盘空间划分 ...