Ajax的初步尝试

最新推荐文章于 2025-09-12 21:03:53 发布

原创最新推荐文章于 2025-09-12 21:03:53 发布 · 489 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

前端设计专栏收录该内容

16 篇文章

订阅专栏

本文介绍了使用HTML和CSS构建网页的基本方法，并探讨了通过JavaScript操作DOM实现动态更新的技术。此外，还详细讲解了利用XMLHttpRequest进行数据异步交换的过程，包括HTTP请求与响应的工作原理。

运用HTML和CSS来实现页面，表达信息
运用XMLHttpRequest和web服务器进行数据的异步交换
运用javascript操作DOM，实现动态局部刷新


//实例化

var request = new XMLHttpRequest();

http请求

http是一种无状态协议

建立TCP连接
Web浏览器向Web服务器发送请求命令
Web浏览器发送请求头信息
Web服务器应答
Web服务器发送应答头信息
Web服务器向浏览器发送数据
Web服务器关闭TCP连接

http请求四个组成

请求的方法或动作，GET,POST…
正在请求的URL
请求头客户端环境信息，身份验证信息等
请求体，请求正文，包括客户提交的查询字符串信息，表单信息…

GET

用于信息的获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符

幂等

POST

一般用于修改服务器上的资源
对所发送信息的数量无限制

HTTP响应

状态码，现实请求成功还是失败
响应头，服务器类型，日期时间，内容类型，长度…
响应体，正文

这里写图片描述

XMLHttpRequest

open(method,url,async)
send(string)

获取服务器的响应

responseText
responseXML
status和statusText
getAllResponseHeader() 获取所有的响应报头
getResponseHeader()

readyState属性

0请求未初始化，open还没有调用
1服务器连接已建立，open已经调用
2请求已接受，也就是接收到头信息了
3请求处理中，也就是接受到响应主体了
4请求已完成，且响应已就绪，响应完成

var request = new XMLHttpRequest();
request.open("GET","get.php","true");
request.send();
request.onreadystatechange = function(){
    if(request.readyState === 4 && request.status === 200){
        //做一些事情 
        //eg  request.responseText
    }
}