一、什么是ajax:(只刷新局部页面的技术)

AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 Ajax并不是一种全新的技术,而是整合了几种现有的技术:javascript、xml、css。使用Ajax的好处是提供友好的用户体验,只刷新局部页面,有效利用带宽等。其特点是不刷新整个页面。

异步:发送请求后不等返回结果,继续做别的事情,由回调函数处理结果

JavaScript :通过XMLHttpRequest对象向服务器发起请求,获得返回结果,更新页面

XML:封装数据

Css:用于美化页面样式。

二、用途

使用JavaScript从服务器获取数据而不必刷新整个页面

三、怎样使用Ajax

AJAX 遵循Request/Response 模式,这个框架的基本流程为:对象初始化->发送请求->服务器接收->服务器返回->客户端接收->修改客户端页面内容。这个过程是异步进行的。

1、  初始化对象并发出XMLHttpRequest 请求

  1. functionCreateXmlHttpRequest(){
  2. if(window.ActiveXObject){
  3. xmlHttpRequest =newActiveXObject("Microsoft.XMLHTTP");
  4. }elseif(window.XMLHttpRequest){
  5. xmlHttpRequest =newXMLHttpRequest();
  6. }
  7. return xmlHttpRequest;
  8. }
  9. //为了让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 -- 服务器端出错

  1. function haoLeJiaoWo(){
  2. if( xmlHttpRequest.readyState ==4&& xmlHttpRequest.status ==200){
  3. var b = xmlHttpRequest.responseText;
  4. if(b=="true"){
  5. alert("用户名已经存在");
  6. }else{
  7. alert("用户名可以使用");
  8. }
  9. }
  10. }

XMLHttpRequest 对成功返回的信息有两种处理方式:

responseText 将传回的信息当字符串使用;

responseXML 将传回的信息当XML 文档使用,可以用DOM 处理。

整体的函数:

  1. Function check(){
  2. // 发送请求到服务器,判断用户名是否存在
  3. // 请求字符串
  4. var url ="?operate=doCheckUserExists&uname="+uname;
  5. // 1. 创建XMLHttpRequest组件
  6. xmlHttpRequest = createXmlHttpRequest();
  7. // 2.设置回调函数
  8. xmlHttpRequest.onreadystatechange = haoLeJiaoWo;(状态改变时,将要调用的函数的名字)
  9. // 3.初始化XMLHttpRequest组件
  10. xmlHttpRequest.open("GET",url,true);
  11. // 4.发送请求
  12. xmlHttpRequest.send(null);
  13. }
四、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介绍及使用的更多相关文章

  1. django Ajax介绍

    1.Ajax技术 认识ajax之前必须先了解json模块,json(Javascript  Obiect  Notation,JS对象标记)属于一种轻量级的数据交换格式 json的格式来源于js的格式 ...

  2. Ajax介绍

    AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJA ...

  3. Ajax介绍及爬取哔哩哔哩番剧索引追番人数排行

    Ajax,是利用JavaScript在保证页面不被刷新,页面链接不改变的情况下与服务器交换数据并更新部分网页的技术.简单的说,Ajax使得网页无需刷新即可更新其内容.举个例子,我们用浏览器打开新浪微博 ...

  4. 关于Jquery中ajax介绍

    jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需 ...

  5. [Ajax系列]Ajax介绍

    Ajax简介: Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. What ? AJAX=异步JavaScript和XML AJAX是一种用于创建快读动态网页的技术 通过在后台语 ...

  6. JQuery AJAX介绍

    new ActiveXObject("Microsoft.XMLHTTP")是IE中创建XMLHttpRequest对象的方法.非IE浏览器中创建方法是new XmlHttpReq ...

  7. Ajax 介绍

    Ajax的关键技术:  异步处理数据 使用XHTML(HTML)和CSS构建标准化的展示层 使用DOM(document object model)进行动态显示和交互 使用XML和XSLT进行数据交换 ...

  8. Unit01: Ajax介绍

    Unit01: Ajax 1. ajax是什么? (asynchronous javascript and xml) ajax是一种用来改善用户体验的技术,本质是利用浏览器提供的一个 特殊对象(XML ...

  9. [TimLinux] JavaScript 原生AJAX介绍

    1. AJAX 异步JavaScript + XML,用于浏览器内部通过前端JavaScript语言操纵,与HTTP服务器进行连接通信的技术. 2. XMLHttpRequest对象 从IE7+,以及 ...

随机推荐

  1. Django1.10+Mysql 5.7存储emoji表情,报Incorrect string value: '\\xF0\\x9F\\x90\\xA8' for column 'signature' at row 1的解决方法

    问题: 在做webapp项目的时候,用户提交emoji数据,控制台报错:Incorrect string value: '\\xF0\\x9F\\x90\\xA8' for column 'signa ...

  2. netty详解之io模型

    提起IO模型首先想到的就是同步,异步,阻塞,非阻塞这几个概念.每个概念的含义,解释,概念间的区别这些都是好理解,这里深入*nix系统讲一下IO模型. 在*nix中将IO模型分为5类. Blocking ...

  3. 谷哥的小弟学前端(11)——JavaScript基础知识(2)

    探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 具体解释Android主流框架不可或缺的基石 站在源代码的肩膀上全解Scroller工作机制 Android多分辨率适 ...

  4. 一行代码搞定ThoughtWorks面试题

    今天在微博看到一道有趣的题目.作为python的脑残粉,自然手痒. 题目在这里. FizzBuzzWhizz 你是一名体育老师.在某次课距离下课还有五分钟时,你决定搞一个游戏.此时有100名学生在上课 ...

  5. 【Cocos游戏实战】功夫小子第七课之游戏主功能场景逻辑功能和暂停功能场景的分析和实现

    CSDN的markdown编辑器是吃屎了么! !.什么玩意.!写了一半写不了东西还全没了,搞个毛线! 本节课的视频教程地址是:第七课在此 假设本教程有帮助到您,希望您能点击进去观看一下,并且如今注冊成 ...

  6. hdu 5635 LCP Array(BC第一题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5635 LCP Array Time Limit: 4000/2000 MS (Java/Others) ...

  7. 5. Effective Java 第三版——使用依赖注入取代硬连接资源

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  8. 自学Zabbix3.10.1.2-事件通知Notifications upon events-媒介类型SMS

    自学Zabbix3.10.1.2-事件通知Notifications upon events-媒介类型SMS 服务器安装串口GSM短信猫之后,zabbix可以使用它来发送短信通知给管理员,如下注意事项 ...

  9. 在windows平台使用Apache James搭建邮件服务器以及使用C#向外网发送邮件

    首先环境搭建: 1.下载安装JDK,并且配置环境变量 2.下载Apache James ,下载解压之后的目录如图 双击bin下边的run.bat批处理文件安装James 服务,提示如下信息说明安装成功 ...

  10. 56、jsのBOM对象与DOM对象

    javascript的Bom和Dom对象使我们学习的重点,这篇随笔可以重点阅读 一.BOM对象 1.window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个windo ...