Ajax

最新推荐文章于 2025-03-16 10:00:00 发布

原创最新推荐文章于 2025-03-16 10:00:00 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍Ajax技术，包括其工作原理、JavaScript实现方法及jQuery简化应用。通过异步网络请求，实现局部网页内容更新，避免了传统网页的整页重载，提升用户体验。

今天重新整理下如何使用Ajax

Ajax

Ajax全称为“Asynchronous Javascript And XML”，它不是一门新的技术，而是一种新的方法，它用JavaScript执行异步网络请求。它可以在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

JavaScript使用ajax

创建 XMLHttpRequest 对象

为了应对所有的现代浏览器，包括 IE5 和 IE6，需要检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：XMLHttpRequest 对象用于和服务器交换数据

var xmlhttp;
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

向服务器发送请求

open(method,url,async)

method：GET或POST
url：请求地址，如果是GET请求在后面加上请求参数
async：true（异步）或 false（同步）

send(string)

string：如果是POST请求，请求参数写在这，GET请求此处为空或者为null

xmlhttp.open("GET","ajaxservlet?username=xxx",true);
xmlhttp.send();
//POST
xmlhttp.open("POST","ajaxservlet",true);
xmlhttp.send("username=xxx");

服务器响应和客户端接收

xmlhttp.responseTex：获得字符串形式的响应数据。

XMLHttpRequest 对象的三个重要的属性

onreadystatechange：每当 readyState 属性改变时，就会调用该函数
readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0：请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
status：200: “OK”；404: 未找到页面

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

jQuery使用Ajax

$.ajax()

$.ajax({
    url:"请求路径"
    type:"请求方式"
    data:"请求参数"//{"key":"value"}
    success:function(data){
    	//响应成功的回调函数
	},
    error:function(){
        //响应失败的回调函数
    },
    dataType:"设置响应数据格式"
});