啊啊啊~~~~~ Ajax

最新推荐文章于 2024-07-19 12:00:00 发布

逸晓晴宸

最新推荐文章于 2024-07-19 12:00:00 发布

阅读量184

点赞数 5

文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/weixin_60548926/article/details/120751609

版权

1、什么是Ajax

Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。

2、同步与异步的区别

同步提交：同步请求是指当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码，

异步提交：异步请求就当发出请求的同时，浏览器可以继续做任何事， Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。

创建XMLHttpRequest对象

    //1.创建xhr对象
    const xhr = new XMLHttpRequest() 
    //2.调用xhr.open()函数
    xhr.open('get', './data.php')
    //如果是用 ajax 对象发送 post 请求，必须要先设置一下请求头中的 content- type
    //xhr.setRequestHeader('content-type', 'application/x-www-form- urlencoded')
    //3.调用xhr.send()函数
	xhr.send()
    //4.监听xhr.onreadyStateChange事件
	xhr.onreadyStateChange = function () {
	// 每次 readyState 改变的时候都会触发该事件
	// 我们就在这里判断 readyState 的值是不是到 4
	// 并且 http 的状态码是不是 200 ~ 299
	if (xhr.readyState === 4 && xhr.status==200) {
	// 这里表示验证通过
	// 我们就可以获取服务端给我们响应的内容了 }
}

实现跨域请求Jsonp

JSONP的实现原理就是通过<script>标签的src属性,请求跨域的接口数据,并通过函数调用的形式,接受跨域接口响应回来的数据.

$.ajax({    
    url: "/login/authenticate",   //请求的url地址   
    dataType: "json",   //返回格式为json    
    async: true, //请求是否异步，默认为异步，这也是ajax重要特性    
    data: data,    //参数值    
    type: "GET",   //请求方式    
    beforeSend: function(request) {        
      //请求前的处理...
    },   
    success: function(data) {        
    //请求成功时处理...
    },   
    complete: function() {        
      //请求完成的处理...   
    },    
    error: function() {        
      //请求出错处理...
    }
});

一个最简单的Ajax

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>yixiaoqingchen</title>
  //引入一个jquery的js
  <script src="jquery.js"></script>
</head>

<body>
  <button id="btnGET">发起GET请求</button>
  <button id="btnPOST">发起POST请求</button>
  <script>
    $(function () {
    //给btnGET按钮绑定点击事件
      $('#btnGET').on('click', function () {
        $.ajax({
          type: 'GET',
          url: 'http://www.liulongbin.top:3006/api/getbooks',
          data: {
            id: 1
          },
          success: function (res) {
            console.log(res)
          }
        })
      })
    //给 btnPOST按钮绑定点击事件
     $('#btnPOST').on('click', function () {
        $.ajax({
          type: 'POST',
          url: 'http://www.liulongbin.top:3006/api/addbook',
          data: {
            //提交给服务器的数据
            bookname: '史记',
            author: '司马迁',
            publisher: '上海图书出版社'
          },
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  </script>
</body>

</html>

小伙伴们可以点赞，关注一波✨

逸晓晴宸

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
啊啊啊~~~~~ Ajax

1、什么是AjaxAjax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。2、同步与异步的区别同步提交：同步请求是指当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码，异步提交：异步请求就当发出请求的同时，浏览器可..
复制链接

扫一扫