【Web】0底子学Web—ajax、原生js实现ajax—get、原生js实现ajax—post、原 ...

ajax

Ajax是一种用于创建异步web应用程序的技术，通过JavaScript和XML或JSON的组合实现数据的异步传输和页面的动态更新，提供了更流通和交互式的用户体验，已成为构建现代Web应用程序的常用技术。
焦点对象: XMLHttpRequest
mary 1234 哀求
用户点击注册---------------->服务端<------>数据库
<——————————————————
响应 结果
一次哀求和响应结束就是ajax的完整过程
哀求

哀求地点(服务器)：https://sp1.baidu.com/5bU/union.gif?q=ajax
哀求参数： {key1:val1,key2:val2} | key1=val1&key2=val2 | formData
哀求参数类型:
  application/x-www-form-urlencoded‌：key1=val1&key2=val2
  application/json‌：JSON.stringfity({key1:val1,key2:val2})
  multipart/form-data：文件上传 formData对象
哀求方式: get查|post交|put改|delete删
  get：参数在地点栏可以看到，参数长度有限定(2000字符左右)，get哀求可以缓存
  post：参数在地点栏不可以看到，更加安全，参数长度没有限定，post哀求一样平常不可以缓存
响应格式: text | json
响应结果: http状态码200
  成功
  失败
状态码

详见：https://blog.csdn.net/ttrr27/article/details/135612954
200：哀求成功
304: 从缓存获取
400: 错误哀求（哀求格式错误）
403: 拒绝哀求(没有权限)
404: 找不到访问的资源(一样平常都是url写错)
500: 内部服务器错误(后端代码语法错误)
1XX: 哀求正在处置惩罚
2XX：哀求响应成功
3XX: 重定向
4XX: 客户端错误
5XX: 服务端错误
http

HTTP (hypertext transport protocol)协议超文本传输协议，协议详细规定了欣赏器和万维网服务器之间互相通信的规则。
##哀求报文
哀求行: 协议版本 哀求类型get/post 哀求url
哀求头：键值对情势
空行
哀求体: get无哀求体，post有哀求体
##响应报文
响应行：协议版本 响应码 响应结果
响应头: 键值对情势
空行
响应体:html
实现方式

原生js

1.   1.获取XMLHttpRequest对象
2.   2.打开连接通道
3.   3.设置请求参数类型:
4.      ‌application/x-www-form-urlencoded‌：key1=val1&key2=val2
5.      application/json‌：JSON.stringfity({key1:val1,key2:val2})
6.      multipart/form-data：文件上传  formData对象
7.   4.设置响应类型:  json |  text
8.   5.发送
9.   6.响应结果（reaystate==4&&status==200）

复制代码

原生js的fetch

1.   get：
2.      fetch('url?a=1&b=2')
3.      .then(res=>res.text())
4.      .then(data=>console.log(data))
5.      .catch(err=>console.log(err))
6.   post：
7.      fetch('url','a=1&b=2')
8.      .then(res=>res.json())
9.      .then(data=>console.log(data))
10.      .catch(err=>console.log(err))

复制代码

jquery实现

1.      $.ajax({
2.         url:'url'，
3.         method:get/post，
4.         data: 参数，
5.         contentType:请求类型
6.         datatype：响应类型
7.         processData: false   //是否将json转换为 key=val&key=val,默认是true
8.         success：function(res){},
9.         error：function(err){}
10.      })
12.      $.getJson('url?a=1&b=2')
13.         .then(data=>console.log(data))
14.         .catch(err=>console.log(err))
16.      $.post('url','a=1&b=2')
17.         .then(data=>console.log(data))
18.         .catch(err=>console.log(err))

复制代码

axios实现（现在最流行）

1.      axios({
2.         url:'url'，
3.         method:get/post，
4.         data: 参数，
5.         contentType:请求类型,
6.         responseype：响应类型,
7.         timeout:1000,  //超时进入catch
8.         headers:{
9.            Content-Type:
10.         }
11.      })
12.         .then(res=>console.log(res.data))
13.         .catch(err=>console.log(err))
15.      axios.get('url?a=1&b=2')
16.         .then(res=>console.log(res.data))
17.         .catch(err=>console.log(err))
19.      axios.post('url','a=1&b=2')
20.         .then(res=>console.log(res.data))
21.         .catch(err=>console.log(err))

复制代码

原生js实现ajax—get

1. <script>
2.     // 1. 获取xhr核心对象
3.     let xhr = new XMLHttpRequest()
4.     // 2. 打开连接
5.     xhr.open('get', 'https://apis.tianapi.com/ancbooks/index?key=c8bb542de7bc231251b70d2159a52dcf&id=9872ed9fc22fc182')
6.     // 3. 设置请求参数类型(可选)
7.     xhr.setRequestHeader('Content-Type', ' application/x-www-form-urlencoded')
8.     // 4. 设置响应类型
9.     xhr.responseType = 'json'
10.     // 5. 发送
11.     xhr.send()
12.     // 6. 响应结果
13.     xhr.onreadystatechange = function () {
14.         // 请求完成
15.         if (xhr.readyState == 4 && xhr.status == 200) {
16.             // 获取结果
17.             let res = xhr.response
18.             console.log(res)
19.             console.log(res.result.content)
20.         }
21.     }
22. </script>

复制代码

原生js实现ajax—post

1. <script>
2.     // 获取xhr核心对象
3.     let xhr = new XMLHttpRequest()
4.     // 打开连接
5.     xhr.open('post', 'https://apis.tianapi.com/zhanan/index')
6.     // 设置请求参数类型
7.     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
8.     // 设置响应类型
9.     xhr.setRequestHeader = 'json'
10.     // 发送
11.     xhr.send('key=c8bb542de7bc231251b70d2159a52dcf')
12.     // 响应结果
13.     xhr.onreadystatechange = function () {
14.         if (xhr.readyState == 4 && xhr.status == 200) {
15.             // console.log(JSON.parse(xhr.response).result.content)
16.             console.log(JSON.parse(xhr.response))
17.         }
18.     }
19. </script>

复制代码

原生js实现fetch

1.     <script>
2.         let str = prompt('请输入一个多音字:')
3.         // get
4.         fetch(`https://apis.tianapi.com/duoyinzi/index?key=c8bb542de7bc231251b70d2159a52dcf&word=${str}`)
5.             .then(response => response.json())  // 设置响应格式
6.             .then(data => {
7.                 console.log(data)
8.                 console.log(data.result.hanzi);
9.                 for (let i of data.result.list) {
10.                     console.log(i)
11.                 }
12.             })  // 成功响应结果
13.             .catch(err => console.log(err))  // 失败响应结果
15.         //post
16.         let data = { key: 'c8bb542de7bc231251b70d2159a52dcf', word: '豫R' }
17.         fetch('https://apis.tianapi.com/chepai/index', { method: 'post', body: 'key=c8bb542de7bc231251b70d2159a52dcf&word=豫R', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
18.             .then(response => response.json()) //设置响应格式
19.             .then(data => console.log(data))   //成功响应结果
20.             .catch(err => console.log(err))    //失败响应结果
21.     </script>

复制代码

jquery实现ajax

1.     <script>
2.         $.ajax({
3.             url: 'https://apis.tianapi.com/tiangou/index',     //请求地址
4.             method: 'post',  //请求方式
5.             data: { key: '639e9d8b3e37974a3de3f2442bab91dc' },     //请求参数
6.             contentType: 'application/x-www-form-urlencoded',   //请求类型
7.             dataType: 'json',      //响应类型
8.             // processData:true,   //是否序列化处理，默认true key=639e9d8b3e37974a3de3f2442bab91dc
9.             success: function (res) {   //成功的结果
10.                 console.log(res)
11.             },
12.             error: function (err) {     //失败的结果
13.                 console.log(error)
14.             }
15.         })
17.         $.getJSON('https://apis.tianapi.com/tiangou/index?key=639e9d8b3e37974a3de3f2442bab91dc')
18.             .then(data => console.log(data))   //成功响应结果
19.             .catch(err => console.log(err))    //失败响应结果
21.         $.post('https://apis.tianapi.com/tiangou/index', 'key=639e9d8b3e37974a3de3f2442bab91dc')
22.             .then(data => console.log(data))   //成功响应结果
23.             .catch(err => console.log(err))    //失败响应结果
24.     </script>

复制代码

axios实现ajax

1. <body>
2.     <input type="text"><button>查询</button>
3.     <ul>
5.     </ul>
6.     <script>
7.         $(function () {
8.             $('button').click(function () {
9.                 $('ul').html() //先清空
10.                 let name = $('input').val()
11.                 axios.get('/starinfo/index?key=639e9d8b3e37974a3de3f2442bab91dc&name=' + name)
12.                     .then(res => {
13.                         let dd = res.data
14.                         console.log(dd)
15.                         dd.list.forEach(item => {
16.                             let _li = $(`<li>${item}</li>`)
17.                             $('ul').append(_li)
18.                         })
21.                     })   //成功响应结果
22.                     .catch(err => console.log(err))    //失败响应结果
24.             })
25.         })
27.         //全局设置
28.         axios.defaults.baseURL = 'https://apis.tianapi.com';
29.         axios.defaults.timeout = 1000;
31.         //配置写法
32.         axios({
33.             url: '/starinfo/index',     //请求地址
34.             method: 'post',  //请求方式
35.             data: 'key=639e9d8b3e37974a3de3f2442bab91dc&name=刘德华',     //请求参数
36.             responseType: 'json',      //响应类型
37.             timeout: 1000,  //超过1000毫秒自动走到catch
38.             headers: {
39.                 'Content-Type': 'application/x-www-form-urlencoded',   //请求类型
40.             }
41.         })
42.             .then(data => console.log(data.data))   //成功响应结果
43.             .catch(err => console.log(err))    //失败响应结果
46.         axios.get('/starinfo/index?key=639e9d8b3e37974a3de3f2442bab91dc&name=刘德华')
47.             .then(data => console.log(data.data))   //成功响应结果
48.             .catch(err => console.log(err))    //失败响应结果
50.         axios.post('/starinfo/index', 'key=639e9d8b3e37974a3de3f2442bab91dc&name=刘德华')
51.             .then(data => console.log(data.data))   //成功响应结果
52.             .catch(err => console.log(err))    //失败响应结果
53.     </script>
54. </body>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。