AJAX基础_代码007(未授权)

首页
ajax
正文

本文介绍: 简单点说，就是XMLHt t pReques t 对象与服务器通信，它可以使用JSON，XML，HTML，和text 文本格式发送和接收数据，AJAX最吸引人的就是它的异步特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。参数名=值&参数名2=值2–&g t;– 概念：AJAX是浏览器与服务器进行数据通信的技术,能把把数据变活 –>2.请求头：以键值对的格式携带的附加信息，比如：Content-type（类型）接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!– 什么是AJAX

定义AJAX是异步的Jav aSc ript和XML，

简单点说，就是XMLHttpRequest对象与服务器通信，它可以使用JSON，XML，HTML，和text 文本格式发送和接收数据，

AJAX最吸引人的就是它的异步特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。 –>

<!– 概念：AJAX是浏览器与服务器进行数据通信的技术,能把把数据变活 –>

<!– 怎么用AjAX

1.先使用 axios库，与服务器进行数据通信

2.再学习XMLHttp Request对象的使用，了解AJAX底层原理 –>

<!– axios 使用

语法：

1.引入 axios.js

2.使用 axios 函数

要传入配置对象，再用.th en回调函数接收结果，并做后续处理

axios({

url:’目标资源地址‘

}).th en((result)=>{

//对服务器返回的数据做后续处理

})

–>

<!– URL

定义：统一资源定位符，简称网址，用于访问网络上的资源

组成：协议+域名+资源路径

http 协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式

域名：必须要写的，标记服务器在互联网中的方位

资源路径：标记资源在服务器下的具体位置

–>

<!– URL查询参数

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

语法：http：//xxxx.com/xxx/xxx?参数名=值&参数名2=值2–>

<!– axios 查询参数

语法：使用 axios提供的params 选项

注意：axios在运行时把参数名和值，会拼接到url？参数名=值

–>

<!– method：请求的方法，GET可以省略不区分大小写

GET:获取数据（默认行为可以省略）

POST:提交数据

PUT:修改数据（全部）

PATCH:删除数据

DELETE:修改数据（部分）

–>

<!– data：提交数据 –>

<!– axios 错误处理

语法：在then方法的后面，通过点语法调用 catch 方法，传入回调函数并定义形参

a x ios({

//请求选项

}),then(result => {

//处理数据

}).catch(error =>{

//处理错误

})

–>

<!–浏览器发送给服务器的内容叫做请求报文

请求报文格式

1.请求行：请求方法，URL，协议

2.请求头：以键值对的格式携带的附加信息，比如：Content-type（类型）

3.空行：分隔请求头，空行之后的是发送给服务器的资源

4.请求体：发送的资源

可以通过 chrome 网络面板查看请求报文

请求报文可以用于错误排查

可以通过请求报文排查错误原因，并修复

–>

<!– HTTP协议-响应报文

HTTP协议：规定了浏览器发送及服务器放回内容的格式

响应报文：服务器按照HTTP协议要求的格式，返回给浏览器的内容

1.响应行（状态行）：协议，HTTP响应状态码，状态信息

2.响应头：以键值对的格式携带的附加信息，比如：Content-Type

3.空行：分隔响应头，空行之后的是服务器返回的资源

4.响应体：返回的资源

HTTP响应状态码

用来表明请求是否成功完成

比如404：服务器找不到资源

1xx：信息

2xx：成功

3xx：重定向信息

4xx：客户端错误

5xx：服务器错误

–>

<!– 接口文档

接口文档：后端提供的描述接口文章

接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数

–>

<p></p>

<!–

城市列表: http://h m ajax.ithei ma.net/api/city

参数名: p name

值: 省份名字

–>

axi os({

url: ‘http://h m ajax.itheima.net/api/city‘,

// 查询参数

params: {

p name: ‘福建省’

}

}).then(result => {

console.log(result.data.list)

document.querySelector(‘p‘).innerHTML = result.data.list.join(‘<b r>’)

})

</script>

注册用户：http://hm ajax.itheima.net/api/registe r

请求方法：POST

参数名：

username：用户名（中英文和数字组成，最少8位）

password：密码（最少6位）

目标：点击按钮，通过ax io s 提交用户和密码，完成注册

docu ment.querySelector(‘.btn’).addEventListener(‘click‘, () => {

axio s({

url: ‘http://hm ajax.itheima.net/api/register’,

method: ‘post‘,

data: {

username: ‘itheima007’,

password: ‘7654321’

}

}).then(result => {

// 成功

console.log(result)

}).catch(error => {

// 失败

// 处理错误信息

console.log(error)

console.log(error.response.data.message)

alert(error.response.data.message)

})

</sc ript>

</body>

</html>

原文地址:https://blog.csdn.net/m0_59745705/art icle/details/134356690

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_17625.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

主题授权提示：请在后台主题设置-主题授权-激活主题的正版授权，授权购买：RiTheme官网

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

代码007普通

相关文章

发表回复 取消回复

发表回复取消回复