Ajax（二）

最新推荐文章于 2025-08-08 15:43:57 发布

zhangwei10php

最新推荐文章于 2025-08-08 15:43:57 发布

阅读量270

点赞数

CC 4.0 BY-SA版权

文章标签： ajax xmlhttprequest web开发 web服务服务器 safari

本文链接：https://blog.youkuaiyun.com/zhangwei10php/article/details/6827793

本文介绍了传统的Web开发模型与基于AJAX的Web开发模型的区别。重点讲解了AJAX的核心对象XMLHttpRequest的创建方法及工作流程，包括初始化请求、指定响应处理函数、发送HTTP请求以及处理服务器返回的数据等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

回顾：——采取相同的技术（html、css、javascript、xml）——

1、传统的web开发模型

用户首先向web服务器发送一个http请求，服务器获取请求后，从后台数据库、应用程序进行查找，处理结果生成一个html页面。反馈到客户端的是完整的页面：

2、基于AJAX的web开发模型

（采取不同的思路）用户首先向web服务器发送一个http请求，服务器获取请求后，从后台数据库、应用程序进行查找，处理结果最终生成xml数据。反馈到客户端的是完整的页面：

核心对象

AJAX的核心对象XMLHttpRequest

1、定义

AJAX的核心对象XMLHttpRequest

XMLHttpRequest：是XMLHTTP组件的对象，通过该对象AJAX可以像桌面应用程序一样同服务器进行数据层面的交互。不需要每次都进行整个页面的刷新。

2、步骤

1）初始化对象并发送XMLHttpRequest请求

newXMLHttpRequest针对不同的浏览器，在初始对象时要注意

针对IE7.0、8.0、firefox、mozillar、opera、safari浏览器

Var xmlhr= newXMLHttpRequest();

针对IE5.0、5.5、6.0

Var xmlhr = newActiveXObject();

2）指定响应处理函数

事件句柄Onreadystatechange每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次。

3）发出HTTP请求

Open

初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。

Send

发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。

Status

4）处理服务器返回的数据

responseXML

responseText

3.应用

function verify(){

var xmlhttp;
var username = document.getElementById("aa");
if(window.XMLHttpRequest){
   xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMimeType){
     xmlhttp.overrideMimeType("text/xml");
     }
}
else if(window.ActiveXObject){
var activename = ['MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var i=0;i<activename.length;i++){
try{
     xmlhttp = new ActiveXObject(activename[i]);
     break;
}
catch(e){ }
}
}
xmlhttp.onreadystatechange=callback;
function callback(){
if(xmlhttp.readyState == 4){
var responseText = xmlhttp.responseText;
var divNode = document.getElementById("cc");
divNode.innerHTML = responseText;
}}
xmlhttp.open('GET','aa.txt',true);
xmlhttp.send(null);
}