ajax 基础带案例

最新推荐文章于 2024-09-10 06:15:30 发布

qyszy123

最新推荐文章于 2024-09-10 06:15:30 发布

阅读量78

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qyszy123/article/details/125196485

版权

本文介绍了Ajax的基础知识，包括HTTP请求过程、请求和响应头的组成、各种请求方法以及响应码。接着，讲解了XMLHttpRequest对象的同步与异步操作，以及Ajax的优缺点。此外，文章还深入探讨了JQuery中的Ajax使用，如.load(), $.get(), $.post()和$.ajax()方法，提供了详细的语法和实例。" 123411292,12770027,伸展树（Splay Tree）详解与应用,"['数据结构', 'C++', '算法']

摘要由CSDN通过智能技术生成

HTTP

http是一种无状态的网络协议

http的请求过程

建立TCP网络链接（与服务器联通）
客户端发送请求头+请求体
服务器应答响应头+响应头
关闭TCP链接
客户端(浏览器)渲染内容

请求头的组成

请求行(请求报头)

GET 请求方法
/ 请求的资源地址
/HTTP/1.1 协议
请求头信息
Accept 浏览器接收的类型
Cookie 回话信息
User-Agent 浏览器头信息
空行
请求体

响应头的组成

响应行
HTTP/1.1 协议
200 响应码
ok 状态
响应头信息
Content-Type返回的数据类型
空行
响应体(返回的网页)

请求的方法

参考链家restFul:传送门

get 获取
post 添加
put 修改
delete 删除
trace 回显
head 只发送信息头
options 选项

响应码

响应码大全
1xx 消息
2xx 成功 200响应成功
3xx 重定向 307临时重定向
4xx 客户端错误 404 错误
5xx 服务器错误 500服务器错误

XMLHTTPRequst(xhr)

ajax是一项综合的技术，全称Async JavaScript And Xml 异步的JavaScript和XML
核心是使用 XMLHttpReqeust与服务器异步交换数据通过js动态的操作dom来实现页面无刷新更新视图

同步与异步

JavaScript 默认是从上向执行代码上一行执行完毕下面开始执行下一行.成为同步阻塞式的
异步是非阻塞式的执行代码实现方式：

事件响应
通过回调函数可以实现异步(setTimeout)
Promise

ajax优缺点

优点
最大的优点：无刷新更新页面视图
异步(不影响别的代码执行)
缺点
对搜索引擎SEO不友好(内容是通过JavaScript加载的百度没办法收录你的内容百度搜索对应的关键字搜索不奥你的网页)

get请求

var xhr = new XHLHttpRquest();
xhr.open("get,"'./kongfu.txt')
xhr.send();
xhr.onreadystatechange = funcion(){
   
     if(xhr.redyState=4){
   
        if(xhr.status==200){
   
           console.log(xhr.responseText)