ajax笔记_get(url, data, options) { if (!options) { options -CSDN博客

本文链接：https://blog.csdn.net/qq_45025670/article/details/126095049

文章目录

ajax介绍
原生Ajax
jQuery的Ajax

ajax介绍

概念

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

它不是新的编程语音，而是几种技术的结合体

Asynchronous JavaScript and XML

优点

无刷新更新数据

在不刷新整个页面的前提下与服务端进行数据交互

异步与服务器通信
前端和后端负载平衡

Ajax创建

  步骤：
  打电话：             ajax请求
   1：买个手机           创建ajax对象
   2：拨号               连接服务器
   3：说话               发送请求
   4：听                 接收返回

Onreadystatechange(状态改变事件)

readyState 属性：请求状态

0:请求未初始化(还没有调用 open())
1:请求已经建立，但是还没有发送（还没有调用 send()） 
2:请求已发送，正在处理中（通常现在可以从响应中获取内容头）
3:请求在处理中，通常响应中已有部分数据可用了，但是服务器还不有完成响应的生成。 
4:响应已完成，您可以获取并使用服务器的响应了。

Status 属性：请求结果

a) 201-206 都表示服务器成功处理了请求 的状态代码，说明网页可以正常访问。 
    【】i. 200（成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。 
    ii. 201(已创建)请求成功且服务器已创建了新的资源。 
    iii. 202（已接受）服务器已接受了请求，但尚未对其进行处理。 
    iv. 203（非授权信息）服务器已成功处理了请求，但返回了可能来自另一来源的信息。 
    v. 204（无内容）服务器成功处理了请求，但未返回任何内容。 
    vi. 205（重置内容）服务器成功处理了请求，但未返回任何内容。与 204 响应 不同，此响应要求请求者重置文档视 图（例如清除表单内容以输入新内容）。 
    vii. 206（部分内容）服务器成功处理了部 分 GET 请求。 

b) 300-307 表示的意思是：要完成请求，您 需要进一步操作。通常，这些状态代码 是永远重定向的。 
    i. 300（多种选择）服务器根据请求可执 行多种操作。服务器可根据请求者来选择一项操作，或提供操作列表供其选择。 
    ii. 301（永久移动）请求的网页已被永久 移动到新位置。服务器返回此响应时， 会自动将请求者转到新位置。 
    iii. 302（临时移动）服务器目前正从不同 位置的网页响应请求，但请求者应继 续使用原有位置来进行以后的请求。 
    iv. 303（查看其他位置）当请求者应对不 同的位置进行单独的 GET 请求以检索 响应时，服务器会返回此代码。 
    v. 304（未修改）自从上次请求后，请求的网页未被修改过。服务器返回此响 应时，不会返回网页内容。       
    vi. 305（使用代理）请求者只能使用代理 访问请求的网页。如果服务器返回此 响应，那么，服务器还会指明请求者 应当使用的代理。 
    vii. 307（临时重定向）服务器目前正从不 同位置的网页响应请求，但请求者应 继续使用原有位置来进行以后的请求。 
c) 4XX 表示请求可能出错，会妨碍服务器的处理。 
     i. 400（错误请求）服务器不理解请求的语法。 
     ii. 401（身份验证错误）此页要求授权。 
     iii. 403（禁止）服务器拒绝请求 
     iv. 404（未找到）服务器找不到请求的网页。 
     v. 405（方法禁用）禁用指定的方法。 
     vi. 406（不接受）无法使用请求的内容特 性响应请求的网页。 
     vii. 407（需要代理授权）此状态码与 401 类似，但指定请求者必须授权使用代理。如果服务器返回此响应，还表示请求者应当使用代理。 
     viii. 408（请求超时）服务器等候请求时发生超时。 
     ix. 409（冲突）服务器在完成请求时发生 冲突。 
     x. 410（已删除）请求的资源永久删除后， 服务器返回此响应。 
     xi. 411（需要有效长度）服务器不接受不 含有有效内容长度标头字段的请求
     xii. 412（未满足前提条件）服务器未满足 请求者在请求中设置的其中一个前提条件 
     xiii. 413(请求实体过大)服务器无法处理 请求，因为请求实体过大，超出服务器的处理能力。 
     xiv. 414（请求的 URI 过长）请求的 UR（I 通 常为网址）过长，服务器无法处理。 
     xv. 415（不支持的媒体类型） 
     xvi. 416（请求范围不符合要求） 
     xvii. 417（未满足期望值） 
 d) 500-505 表示服务器在尝试处理请求时发生内容错误。这些错误可能是服务器 本身的错误，而不是请求出错。 
     i. 500（服务器内部错误） 
     ii. 501（尚未实施）服务器不具备完成请 求的功能。 
     iii. 502（错误网关）服务器作为网关或代 理，从上游服务器收到了无效的响应。 
     iv. 503（服务不可用） 
     v. 504（网关超时）服务器作为网关或代 理，未及时从上游服务器接收请求。 
     vi. 505（HTTP 版本不受支持）

原生Ajax

Ajax的实现过程

GET请求

<h2>ajax请求服务端数据，将服务器数据取回来放到页面中</h2>
<button id="btn">请求数据</button>
<div></div>

获取页面元素

  var oBtn = document.querySelector('#btn');
  var oDiv = document.querySelector("div");

过程

  oBtn.onclick = function(){
    // 1买手机(创建ajax对象)
    var xhr = new XMLHttpRequest()
    // alert(xhr.readyState)
    // 2拨号(与服务器建立连接)
    /* 
     第一个参数： 传递方式 get  post  
     第二个参数:  请求的url地址
     第三个参数   是否异步   true 异步   false 同步
    */
    xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks',true);
    // alert(xhr.readyState)
    // 3：说话（发送请求)
    xhr.send()
    // 4：听（等待返回）
    // onreadystatechange  准备状态改变事件
    xhr.onreadystatechange = function(){
      // alert(xhr.readyState)
      if(xhr.readyState === 4){
        // alert(xhr.status)
        if(xhr.status === 200){
          console.log(xhr.responseText)
          // 把数据渲染到页面上
        }
      }
    }
  }

POST请求

POST请求比 GET请求多一个Content-Type属性要设置。

// 1 创建ajax对象
var xhr = new XMLHttpRequest()
// 2连接服务器
xhr.open('POST','http://www.liulongbin.top:3006/api/addbook');
// 3 设置 Content-Type属性
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 4调用send方法
xhr.send("bookname=红楼梦&author=曹雪芹&publisher=北京出版社");
// 5监听事件
xhr.onreadystatechange = function(){
  if(xhr.readyState===4 && xhr.status === 200){
    console.log(xhr.responseText)
  }
}

原生Ajax的封装

function resolveData (data) {
  var arr = [];
  for (var k in data) {
    var str = k + "=" + data[k];
    arr.push(str)
  }
  return arr.join('&')
}

// var r = resolveData({ name: 'aa', age: 12 })
// console.log(r)

function $http (options) {
  var xhr = new XMLHttpRequest()

// 把传递过来的对象 转换为查询字符串
var qs = resolveData(options.data)

  if (options.method.toUpperCase() === 'GET') {
    xhr.open(options.method, options.url + '?' + qs);
    xhr.send()
  } else if (options.method.toUpperCase() === 'POST') {
    xhr.open(options.method,options.url);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send(qs);
  }

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // console.log()
      var result = xhr.responseText;
      options.success(result)
    }
  }

调用：

$http({
  method:"POST",
  url:"http://www.liulongbin.top:3006/api/addbook",
  data:{
    bookname:"山海经",
    author:"xxx",
    publisher:"xxxx"
  },
  success:function(res){
    console.log(res)
  }
})

$http({
  method:'GET',
  url:"http://www.liulongbin.top:3006/api/getbooks",
  success:function(res){
   console.log(res)
  }
})

Ajax案例1
Ajax案例2

jQuery的Ajax

$.get(url,[data],callback)
$.post(url,[data],callback)
$.ajax()

$.get


$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
  console.log(res)
  let {data,msg,status} =res
})


$.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(res){
  console.log(res,"带参数")
})

$.post


$.post('http://www.liulongbin.top:3006/api//addbook',{
  bookname:"js基础",
  author:"jxx",
  publisher:"丁鹿学堂"
},function(res){
  console.log(res,"post")
})

$.ajax


$.ajax({
  type:"GET",   //请求的方式   GET 或者 POST
  url:"http://www.liulongbin.top:3006/api/getbooks" ,   //请求的url地址
  data:{id:1},  //请求要携带的参数
  success:function(res){  //请求成功之后的回调函数
    console.log(res)
  }
})


$.ajax({
  type:"POST",   //请求的方式   GET 或者 POST
  url:"http://www.liulongbin.top:3006/api//addbook" ,   //请求的url地址
  data:{
    bookname:"js基础",
    author:"jxx",
    publisher:"丁鹿学堂"
  },  //请求要携带的参数
  success:function(res){  //请求成功之后的回调函数
    console.log(res)
  }
})