Ajax讲解，学习Ajax看这里就够了！！！

最新推荐文章于 2024-05-03 11:08:18 发布

boss朴

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量132

点赞数

分类专栏： ajax 文章标签： javascript vue.js jquery

本文链接：https://blog.csdn.net/m0_46159545/article/details/107495205

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原生Ajax的实现方式：

（即javascript方式）

一、总述：

第一步：获取XMLHttpRequest对象（低版本的IE没有内置此对象，使用的是ActiveXObject）
第二步：设置回调函数
第三步：开启连接
第四步：发送请求

<html>
	<head>
        <script type="text/javascript">
            function loadXMLDoc(){
            	var xmlhttp;
            	//根据当前浏览器的不同确定使用不同的ajax对象
                if (window.XMLHttpRequest){
                  // 现代浏览器一般都是内置了XMLHttpRequest对象
                  // code for IE7+, Firefox, Chrome, Opera, Safari
                  xmlhttp=new XMLHttpRequest();
                }
                else{// code for IE6, IE5
                  //老版本的IE浏览器内置了ActiveXObject对象可以发送ajax请求
                  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
            
            	//当XMLHttpRequest 的状态发生变化时，调用的函数
                xmlhttp.onreadystatechange=function(){
                  //当readyState==4并且status==200时，表示响应已经就绪并且可以进行处理
                  if (xmlhttp.readyState==4 && xmlhttp.status==200){
              		  //将响应回来的数据填充到	myDiv标签内部
                      document.getElementById("myDiv").innerHTML=
                   	  xmlhttp.responseText;
                  }
                }
            
            	//开启与服务器的连接
            	//请求方式为GET，项目下资源位置为/ajax/demo_get.asp,是否异步为true
                xmlhttp.open("GET","/ajax/demo_get.asp",true);
            	
            	//发送请求
                xmlhttp.send();
            }
        </script>
    </head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>

二：分步详述

1、获取XMLHttpRequest对象

XMLHttpRequest 是 AJAX 的基础，就是通过此对象与服务器完成的交互，它可以在不重新加载整个网页的情况下，对网页的某部分进行更新。。

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

创建 XMLHttpRequest 对象的语法：

var xmlHttp = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var xmlHttp =new ActiveXObject("Microsoft.XMLHTTP");

为了兼容不同的浏览器，在变成的时候需要进行逻辑判断，检查当前浏览器是否内置了XMLHttpRequest对象。

    var xmlhttp;
    if (window.XMLHttpRequest){
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else{
      // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

2、设置回调函数

响应回来的数据封装在 XMLHttpRequest 对象的 responseText 或 responseXML 属性中，具体在哪一个属性取决于响应数据的格式：

字符串形式------------------responseText（我们通常会使用json字符串作为返回的数据）

XML形式---------------------responseXML

当我们需要使用返回的数据时，直接访问对应的属性就可以了。

先了解XMLHttpRequest的三个重要的属性：在这里插入图片描述

设置回调函数就是围绕这三个属性进行的

onreadystatechange 用来保存请求状态发生改变时要调用的函数

readyState 表示XMLHttpRequest对象的状态，一共有5个，对应着 readyState 的每个变化，每一次变化都会执行onreadystatechange函数。

status 表示服务器响应的状态码，比如常见的有：200：“OK” 404：“资源不存在”

设置回调函数的目的在于处理服务器返回的数据，所以设置回调函数的核心思想应该是：

为 onreadystatechange设置一个仅仅会在服务器正常响应了数据时执行的函数，此函数用来完成对数据的处理。如下：

    xmlhttp.onreadystatechange=function(){
      //正常响应数据并且数据已就绪
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
      	//数据处理核心代码
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
    }

3、开启连接，发送请求

open函数，有三个可选参数：method、url、boolean

method：表示请求的方式，有get和post两种方式

url：表示所请求资源在服务器中的位置

boolean：

表示此请求是异步还是同步，默认情况下为异步（true），即脚本执行send（）方法后不等待服务器的执行结果，而是继续执行脚本代码；当值为false时，服务器请求是同步进行的，也就是脚本执行send（）方法后等待服务器的执行结果的返回，若在等待过程中超时，则不再等待，继续执行后面的脚本代码！

我们使用Ajax就是为了追求效率，所以一般都是使用true
在这里插入图片描述

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

使用GET方式发送Ajax请求：

1、无参：

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

//因为GET获取的数据会被浏览器缓存，所以我们可以向 URL添加一个唯一的ID，这样每一次的请求都会被真实提交到后台，获取最新的数据
xmlhttp.open("GET","demo_get.asp?t="+Math.random(),true);
xmlhttp.send();

2、有参：

//在url后拼接
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

使用POST方式发送Ajax请求：

1、无参：

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

2、有参：

xmlhttp.open("POST","ajax_test.asp",true);
//因为post请求发送的数据要想被解析，必须告诉服务器解析的方式，所以发送post请求前，需要设置请求头中的Content-type值，如果希望像普通表单那样的方式提交，使用下面的值：
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//将要发送的数据放在send函数内，格式为字符串:k1=v1&k2=v2
xmlhttp.send("fname=Bill&lname=Gates");

Jquery方式实现Ajax：

一、$.ajax() 方法

$.ajax({settings}) 返回已经封装响应数据的 XMLHttpRequest 对象，其中的settings为一个json字符串，用于配置Ajax请求的键值对集合，常用的键有如下几个：

type

类型：String

默认值: “GET”。请求方式 (“POST” 或 “GET”)，默认为 “GET”。

url

类型：String

默认值: 当前页地址。发送请求的地址。

data

类型：String（json字符串）

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。

contentType：

类型：String

默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。

success

类型：Function

请求成功后的回调函数，可以用来处理响应回来的数据。

参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {
             	username:$("#username").val(), 
             	content:$("#content").val()
             },
             success: function(data){
                         //处理数据代码
                      }
         });
    });
});

但是settings中的每一个属性都是有默认值的，默认值适合大多数情况。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。最简单的情况下，$.ajax() 可以不带任何参数直接使用，但是一般我们会写上url。

使用默认的配置发送ajax请求：

jQuery 代码：

$(document).ready(function(){
  $("#b01").click(function(){
  	//htmlobj为已经封装响应数据的 XMLHttpRequest对象
  	htmlobj=$.ajax({
        url:"/jquery/test1.txt",
  	});
  	//使用responseText属性获取响应回来的值
  	$("#myDiv").html(htmlobj.responseText);
  });
});

HTML 代码：

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Content</button>

二、$.get()方法

在$.ajax()的基础上进一步简化，用于发送get请求。

语法：

$.get(URL,callback);

URL:发送的地址
callback：成功之后的回调函数，用于处理数据

示例：

$("button").click(function(){
	//data为服务器返回的数据，status为响应的状态码
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

三、$.post()方法

在$.ajax()的基础上进一步简化，用于发送post请求。

语法：

$.post(URL,data,callback);

URL:发送的地址
data:向服务器发送的数据，json字符串
callback：成功之后的回调函数，用于处理数据

示例：

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

axios+vue实现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>Document</title>
</head>

<body>
    <div id="app">
        <table border="1">
            <tr>
                <th>用户编号</th>
                <th>用户姓名</th>
                <th>用户年龄</th>
            </tr>
            <tr v-for="(user,index) in userList">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
    </div>
    // 引入vue和axios文件
    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: []
            },
            created(){
                // vue和axios整合，主要利用的是created方法，使得页面渲染之前进行数据的请求、获取和封装
                // 然后在渲染阶段将获取的数据显示到页面中
                this.getUserList();
            },
            methods: {
                getUserList(){
                    // axios提供的get方式ajax请求方法
                    axios.get("user.json")
                    // 当请求成功时执行then方法，response为自定义形参名，用来封装响应
                    .then(response => {
                        // console.log(response);
                        this.userList = response.data.data.items
                    })
                    // 当请求执行失败时，执行catch方法,error为自定义形参名，用来封装错误信息
                    .catch(error => {
                        console.log(error);
                    })
                }
            }
        })
    </script>
</body>
</html>

get带参请求：

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post带参请求：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

boss朴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax讲解，学习Ajax看这里就够了！！！

原生Ajax的实现方式：（即javascript方式）一、总述：第一步：获取XMLHttpRequest对象（低版本的IE没有内置此对象，使用的是ActiveXObject）第二步：设置回调函数第三步：开启连接第四步：发送请求<html> <head> <script type="text/javascript"> function loadXMLDoc(){ var xmlhttp;
复制链接

扫一扫