JS-ajax-CSDN博客

本文链接：https://blog.csdn.net/nangongwenxuan/article/details/128923732

ajax介绍

概念: 异步的JavaScript和xml
作用: (无刷新技术) 在不更新网页的前提下,对网页内容进行局部更新
缺点: 搜索引擎不支持

原理:

传统方式:

             发请求                请求数据           返回数据
 浏览器   ============>  服务器 ============>数据库 ============> 服务器 


   组装网页
 ============>  浏览器

ajax方式:
请求交给发请求请求数据返回数据
浏览器 ============> ajax ============> 服务器 ============> 数据库 ============> 服务器

        响应json            组装局部内容
        ============> ajax ============> 浏览器

get请求 4步

1.创建ajax对象
const ajax = new XMLHttpRequest();

2.配置请求
ajax.open(‘get’, ‘url?参数=值&参数=值’)

3.监听
ajax.addEventListener(‘readystatechange’, function (){

  //ajax请求状态 和 http响应状态码
  if(ajax.readyState === 4 && ajax.status === 200){

      JSON.parse( ajax.responseText )
  }

})

4.发送
ajax.send()

post请求 5步

1.创建ajax对象
const ajax = new XMLHttpRequest();

2.配置请求
ajax.open(‘get’, ‘url’)

3.设置请求头
//ajax.setRequestHeader( ‘Content-Type’, ‘application/x-www-form-urlencoded’ )
ajax.setRequestHeader( ‘Content-Type’, ‘application/json’ )

4.监听
ajax.addEventListener(‘readystatechange’, function (){

  //ajax请求状态 和 http响应状态码
  if(ajax.readyState === 4 && ajax.status === 200){

      JSON.parse( ajax.responseText )
  }

})

5.发送
//ajax.send(参数=值&参数=值)
ajax.send(JSON.stringify( {} ))

JSON - 了解

概念: js对象表示法,本身也是js中一个对象
作用: 通常用于数据存储和交换
注意:

1> 严格的key 和 value，键值对结构。
2> 在 .json后缀的文件中，key 必须使用双引号
3> 如果值是字符串，值也必须使用双引号。

{
  "name": "小貂蝉",
  "age": 18,
  "sex": "女",
  "hob": ["html", "css", "Ajax"]
}

json两个方法

JSON.stringify()
JSON.parse()

ajax请求状态 - 面试题

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中 === 开始接收数据(接收部分数据)
4: 请求已完成，且响应已就绪 === 数据已经响应完成, 可以接收所有数据

http响应状态码 - 面试题

1xx 消息
2xx 成功
3xx 重定向
4xx 请求错误
5xx 服务器错误

200 : 请求成功

301 : 永久重定向
302 : 临时重定向
304 : 缓存

400 : 请求参数错误
401 : 未授权
403 : 服务器拒绝请求
404 : 找不到请求资源
405 : 请求方法服务器不支持

5xx : 服务器错误

axios

是什么

基于ajax封装一个请求库

面试题 - ajax封装axios ( 扩展 )
如何使用?

1> 下载: bootcdn

2> 引入: <script src=""> 

3> 调用

  axios.get(url?参数=值&参数=值).then(function (res){
    //响应对象res
  }).catch(function(err){
    //错误提示err
  })


  axios.get(url, {
    params: {
      参数: 值,
      参数: 值,
      参数: 值
    }
  }).then(function (res){
    //响应对象res
  }).catch(function(err){
    //错误提示err
  })


  axios.post(url, {
      参数: 值,
      参数: 值,
      参数: 值
  }).then(function (res){
    //响应对象res
  }).catch(function(err){
    //错误提示err
  })