ajax介绍及使用

时间：2023-03-09 09:59:35
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 请求

  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(){
  3. if( xmlHttpRequest.readyState ==4&& xmlHttpRequest.status ==200){
  4. var b = xmlHttpRequest.responseText;
  5. if(b=="true"){
  6. alert("用户名已经存在");
  7. }else{
  8. alert("用户名可以使用");
  9. }
  10. }
  11. }

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

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

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

整体的函数：

  1. Function check(){
  3. // 发送请求到服务器，判断用户名是否存在
  5. // 请求字符串
  6. var url ="?operate=doCheckUserExists&uname="+uname;
  8. // 1. 创建XMLHttpRequest组件
  9. xmlHttpRequest = createXmlHttpRequest();
  11. // 2.设置回调函数
  12. xmlHttpRequest.onreadystatechange = haoLeJiaoWo;(状态改变时，将要调用的函数的名字)
  14. // 3.初始化XMLHttpRequest组件
  15. xmlHttpRequest.open("GET",url,true);
  17. // 4.发送请求
  18. xmlHttpRequest.send(null);
  19. }
四、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后面加上获取本地时间的参数

相关文章