ajax介绍及使用
一、什么是ajax:(只刷新局部页面的技术)
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 Ajax并不是一种全新的技术,而是整合了几种现有的技术:javascript、xml、css。使用Ajax的好处是提供友好的用户体验,只刷新局部页面,有效利用带宽等。其特点是不刷新整个页面。
异步:发送请求后不等返回结果,继续做别的事情,由回调函数处理结果
JavaScript :通过XMLHttpRequest对象向服务器发起请求,获得返回结果,更新页面
XML:封装数据
Css:用于美化页面样式。
二、用途
使用JavaScript从服务器获取数据而不必刷新整个页面
三、怎样使用Ajax
AJAX 遵循Request/Response 模式,这个框架的基本流程为:对象初始化->发送请求->服务器接收->服务器返回->客户端接收->修改客户端页面内容。这个过程是异步进行的。
1、 初始化对象并发出XMLHttpRequest 请求
functionCreateXmlHttpRequest(){
if(window.ActiveXObject){
xmlHttpRequest =newActiveXObject("Microsoft.XMLHTTP");
}elseif(window.XMLHttpRequest){
xmlHttpRequest =newXMLHttpRequest();
}
return xmlHttpRequest;
}
- //为了让Javascript 可以向服务器发送HTTP 请求,必须使用XMLHttpRequest 对象。各个浏览器对这个实例化过程的实现方式不同。IE 以ActiveX 控件的形式提供,而Mozilla 等浏览器则直接以XMLHttpRequest 类的形式提供
2、指定响应处理函数
指定当服务器返回信息时客户端的处理方式,相应的处理函数名称赋给XMLHttpRequest 对象的onreadystatechange属性。
例如:xmlHttpRequest.onreadystatechange=haolejiaowo;
3、发出HTTP 请求
指定响应处理函数之后,就可以向服务器发出HTTP 请求。这一步调用XMLHttpRequest 对象的open 和send 方法。
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.send(null);
open 的第一个参数是HTTP 请求的方法,为Get、Post或者Head。
open 的第二个参数是目标URL。
open 的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True,则不会继续执行,直到服务器返回信息。默认为True。
4、处理服务器返回的信息
首先,它要检查XMLHttpRequest 对象的readyState 值,判断请求的当前状态。服务器返回信息后,还需要判断返回的HTTP 状态码,确定返回的页面没有错误。
所有的状态码都可以在W3C 的官方网站上查到,http状态码
请求状态:
0 -- 未初始化
1 -- 初始化
2 -- 发送请求
3 -- 开始接受结果
4 -- 接受结果完毕,信息已经返回,可以开始处理
每次状态改变都会调这个函数
HTML返回码:
200 – OK,代表页面正常
404 -- Not found(没有找到资源)
500 -- 服务器端出错
function haoLeJiaoWo(){
if( xmlHttpRequest.readyState ==4&& xmlHttpRequest.status ==200){
var b = xmlHttpRequest.responseText;
if(b=="true"){
alert("用户名已经存在");
}else{
alert("用户名可以使用");
}
}
}
XMLHttpRequest 对成功返回的信息有两种处理方式:
responseText 将传回的信息当字符串使用;
responseXML 将传回的信息当XML 文档使用,可以用DOM 处理。
整体的函数:
Function check(){
// 发送请求到服务器,判断用户名是否存在
// 请求字符串
var url ="?operate=doCheckUserExists&uname="+uname;
// 1. 创建XMLHttpRequest组件
xmlHttpRequest = createXmlHttpRequest();
// 2.设置回调函数
xmlHttpRequest.onreadystatechange = haoLeJiaoWo;(状态改变时,将要调用的函数的名字)
// 3.初始化XMLHttpRequest组件
xmlHttpRequest.open("GET",url,true);
// 4.发送请求
xmlHttpRequest.send(null);
}
四、Ajax缓存
ajax缓存:当再次请求同一url时,浏览器会直接取出缓存里的内容返回,而不向服务器端发送请求.这只有在提交方式使用get时才会发生,解决方法是在url后面加上一个参数来告诉浏览器这是一个新的请求,通常可以用new Date()来生成时间戳。而post方式提交每次都会向服务器发送请求,不要考虑缓存.
解决方法如下:
方法1:
在js中添加代码
Js代码
xmlhttp.setRequestHeader("If-Modified-Since","0");
方法2:
在jsp中response设置
Java代码
response.setHeader("Cache-Control", "no-cache, must-revalidate");
方法3:
在url后面加上获取本地时间的参数
ajax介绍及使用的更多相关文章
- django Ajax介绍
1.Ajax技术 认识ajax之前必须先了解json模块,json(Javascript Obiect Notation,JS对象标记)属于一种轻量级的数据交换格式 json的格式来源于js的格式 ...
- Ajax介绍
AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJA ...
- Ajax介绍及爬取哔哩哔哩番剧索引追番人数排行
Ajax,是利用JavaScript在保证页面不被刷新,页面链接不改变的情况下与服务器交换数据并更新部分网页的技术.简单的说,Ajax使得网页无需刷新即可更新其内容.举个例子,我们用浏览器打开新浪微博 ...
- 关于Jquery中ajax介绍
jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需 ...
- [Ajax系列]Ajax介绍
Ajax简介: Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. What ? AJAX=异步JavaScript和XML AJAX是一种用于创建快读动态网页的技术 通过在后台语 ...
- JQuery AJAX介绍
new ActiveXObject("Microsoft.XMLHTTP")是IE中创建XMLHttpRequest对象的方法.非IE浏览器中创建方法是new XmlHttpReq ...
- Ajax 介绍
Ajax的关键技术: 异步处理数据 使用XHTML(HTML)和CSS构建标准化的展示层 使用DOM(document object model)进行动态显示和交互 使用XML和XSLT进行数据交换 ...
- Unit01: Ajax介绍
Unit01: Ajax 1. ajax是什么? (asynchronous javascript and xml) ajax是一种用来改善用户体验的技术,本质是利用浏览器提供的一个 特殊对象(XML ...
- [TimLinux] JavaScript 原生AJAX介绍
1. AJAX 异步JavaScript + XML,用于浏览器内部通过前端JavaScript语言操纵,与HTTP服务器进行连接通信的技术. 2. XMLHttpRequest对象 从IE7+,以及 ...
随机推荐
- tcpdum使用详解
http://starsliao.blog.163.com/blog/static/89048201062333032563/ TCPdump抓包命令 tcpdump是一个用于截取网络分组,并输出 ...
- 在Ubuntu14.04下安装Docker CE(1) - repository篇
从2017年3月开始,Docker开始分为社区版本和企业版,也就是Docker CE和Docker EE, 原来Ubuntu14.04下,通过sudo apt-get install docker.i ...
- MERGE语法详解
merge语法是根据源表对目标表进行匹配查询,匹配成功时更新,不成功时插入. 其基本语法规则是 merge into 目标表 a using 源表 b on(a.条件字段1=b.条件字段1 and a ...
- Order笔记-数据库创建
过程: 1,为这个项目新建一个用户名(实例),专门用于这个项目 2,建表 问题: 列在此处不允许: 笔记: 建表设置默认值: alter table 表名 modify 字段名 default 默认值 ...
- 【Jquery】之DOM操作
Questions 本篇文章主要讲解Jquery中对DOM的操作,主要内容如下: 1 内容区 1.1 .addClass() (1).addClass(className) <!DOCT ...
- CS:APP3e 深入理解计算机系统_3e Y86-64模拟器指南
详细的题目要求和资源可以到 http://csapp.cs.cmu.edu/3e/labs.html 或者 http://www.cs.cmu.edu/~./213/schedule.html 获取. ...
- wordpess关闭评论的方法,wordpress开发
由于某种原因,需要把wordpress的评论关闭,下面讲一下方法. 在wordpress模板中,找到文章模板页面文件single.php,在里面找到 <?php comments_templat ...
- 控制反转-Ioc之Unity
本篇幅主要介绍控制反转的一些概念,和如何使用Unity实现Ioc.在介绍的时候,会尽量结合代码来讲解一些概念. 1.什么是DI? DI即控制反转,是将对具体实现类的依赖转变为对接口的依赖,这样在编程中 ...
- 为 Azure IoT Edge 设备部署 Azure Stream Analytics 服务
在前面的两篇文章<Azure IoT Edge on Windows 10 IoT Core>和<Azure IoT Edge on Raspberry Pi 3 with Rasp ...
- 两个HC-05蓝牙模块互相绑定构成无线串口模块
HC-05 嵌入式蓝牙串口通讯模块(以下简称模块)具有两种工作模式:命令响应工作模式和自动连接工作模式,在自动连接工作模式下模块又可分为主(Master).从(Slave)和回环(Loopback)三 ...