一文带你解决Ajax！

最新推荐文章于 2023-02-21 12:44:37 发布

老帅比阿

最新推荐文章于 2023-02-21 12:44:37 发布

阅读量352

点赞数 1

分类专栏： web前端开发文章标签： ajax javascript 服务器前端

本文链接：https://blog.csdn.net/leoyongyuan/article/details/125524284

版权

web前端开发专栏收录该内容

10 篇文章 1 订阅

订阅专栏

文章目录

前言
一、客户端和服务器
二、URL地址
三、初窥Ajax
四、JQuery中内置的API
五、通过Ajax提交表单数据
- 1.form表单的传输数据
- 2.通过Ajax提交表单数据
六、XMLHttpRequest基本内容
七、数据交换格式（JSON）
八、封装一个属于简易的Ajax
总结

前言

Ajax应该是我们前后端交互的第一节，所以其重要性可想而知。而且事实上Ajax在实际开发中也是非常常用。并且Ajax这个知识点不难，本文会从源头和你步步刨析Ajax，最后动手实现一个简易版的Ajax轮子。

一、客户端和服务器

首先我们来明确什么是客户端和服务器。
其实这个很简单，比如我们的上网搜索的电脑就是客户端，客户端是用来获取服务器的数据的，我们在百度搜索内容是，百度的页面数据其实都是百度公司的服务器发来我们页面的。而获取数据这个过程，这就是用Ajax来完成。

二、URL地址

在此之前，我们需要把一些基础知识进行介绍，以免后边看得时候会一脸懵逼，我们用在Ajax获取数据时，是需要找到对应的网站地址的（毕竟我们不可能凭空找对吧），所以就需要用到url，url被也被称为路由，就是我们的上网时看到的那些网站地址。

URL(全称是UniformResourceLocator)中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。

常见的URL举例:
http://www.baidu.com
http://www.taobao.com
http://www.cnblogs.com/

URL地址般由三部组成:
①客户端与服务器之间的通信协议
②存有该资源的服务器名称
③资源在服务器上具体的存放位置

在这里插入图片描述

三、初窥Ajax

Ajax 全名 async javascript and XML(异步JavaScript和XML)是前后台交互的能⼒也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具。（额，我一向很讨厌官方术语解释）

在这里我用大白话来解释一下吧，Ajax说白了就是可以让我们获取后端服务器数据的一个API，它的优势在于它可以不刷新页面，只刷新局部页面的情况下获取数据。什么意思呢？最典型的例子就是在游戏上了，想想你玩游戏的时候，有没有出现你点击游戏菜单，这时的菜单是直接跳出来的，而且页面并没有刷新，这就是局部刷新，在不需要刷新整个页面的情况下，只更新我们页面局部的数据信息。这样做的话不仅减少了前后端数据带宽的压力，同时对于用户也可以获得更好的体验。（谁会喜欢一个一直刷新的页面呢？）

四、JQuery中内置的API

好了，前边介绍了很多背景的东西，现在我们要来正式使用Ajax了。在这里我用的是Jquery内置的Ajax。在这里我介绍三个最常用的API get，post，ajax。

1.get

get类型就是直接获取服务器的数据资源（也是最常用的）
下面是API的使用方法
在这里插入图片描述

在代码中具体使用则是,在这里我们data参数不加直接不写即可，在获取时，如果获取成功服务器会返回status:200给对象(这里涉及到计算机网络的知识，如果不懂的话记住就好），并且我们在获取时会传入一个空的回调函数，如果获取成功则服务器会把数据全部打包在一个对象中，然后赋给客户端传过来的回调函数。这时我们如果想获取服务器的数据只需要调用回调函数里面的参数即可。

 $.get('http://www.liulongbin.top:3006/api/getbooks',
 	function(res){
 	if(res.status !== 200) return alert('获取数据错误');
    else{
    	console.log(res);
    }
 )

2.post

post类型就是向服务器传输数据资源
在这里插入图片描述

我们向服务器提交内容时，和get类似，区别在于我们提交的内容是做为参数(传入一个对象，比如我这里要加入一个新的书的信息，则需要把一个新书的数据记录在一个对象中，作为参数传给后端。（注：这里传入参数和返回内容的东西，需要根据后端内容接口内容要求来写，不要傻乎乎以为所有ajax都这样写，但是模板都是这样的）

{
	bookname:bookname,
	author:author,
	publisher:publisher
}

传给后端服务器，后端服务器成功接收后同样会返回200状态码，同时会被后端要传的内容写在传进来的回调函数中。

$.post('http://www.liulongbin.top:3006/api/addbook',
	{bookname:bookname,author:author,publisher:publisher},
    function(res){
    	if(res.status !== 201) return alert('添加失败');
    	else ....
    }
 )

3.ajax

相比于get()和post()函数, jQuery 中提供的$.ajax() 函数,是一个功能比较综合的函数,它允许我们对Ajax请求进行更详细的配置。
在这里插入图片描述
ajax的get类型写法（和上面的get()函数一样的效果)

    $.ajax({
        type:"GET",
        url:'http://www.liulongbin.top:3006/api/getbooks',
        success:function(res){
            if(res.status !== 200) return alert("获取失败");
           	else ...
        }
    })

ajax的post类型写法

    $.ajax({
        type:"POST",
        url:'http://www.liulongbin.top:3006/api/addbook',
        data:{
			bookname:bookname,
			author:author,
			publisher:publisher
		}
        success:function(res){
            if(res.status !== 200) return alert("添加失败");
           	else ...
        }
    })

五、通过Ajax提交表单数据

接下来我们来使用Ajax做一些提交数据的内容。说到提交数据就不得不说form表单这个标签了。（如果学到这里还不知道form是啥的话自觉出门左拐）在远古版本时，没有ajax我们就是用form来收集数据的，但是现在已经渐渐变少了。实际上form的本职工作就是负责页面数据采集的。
考虑到大家在学HTML时，遇到form标签时并没有实际传输过数据给后台服务器（其实我也没有）所以在这里来给捋一下form表单如何提交的。

1.form表单的传输数据

只是文字表述显得很空泛，所以让我们共同来用一个小例子来完成。
假设现在我们要实现一个登陆功能的页面，这个显然我们可以用一个简单的form标签来完成。
在这里插入图片描述
在这里标签中，input有两个属性，type是判断input是啥类型，name就是我们为我们input收集到的数据命名的名字，这个是要作为参数对象的键传给后端的。什么意思呢，如果不懂的话自己复制一下代码随意填入数据点一下提交，在观察浏览器上的url你就懂了。在这里的button是type是绑定在form中作为提交按钮的。

<form>
	<input type="text" name="email_ or_mobile" />
	<input type="password" name="password" />
	<input type=" checkbox" name=" remember. me." checked />
	<button type=" submit">提交</button>
</form>

这就是我们表单发送的大概内容，但是这样我们还没办法把表单内容传输到想要的网址，这里就需要介绍一下form的四个属性了。

action
action属性用来规定当提交表单时，向何处发送表单数据。
action属性的值应该是后端提供的一个URL地址,这个URL地址专门]负责接收表单提交过来的数据。
当form表单在未指定action属性值的情况下，action 的默认值为当前页面的URL地址。
注意: 当提交表单后，页面会立即跳转到action属性指定的URL地址
target
target属性用来规定在何处打开action URL。
它的可选值有5个，默认情况下，target 的值是_self, 示在相同的框架中打开action URL。
method
method属性用来规定以何种方式把表单数据提交到action URL。
它的可选值有两个，分别是get和post。
默认情况下，method的值为get,示通过URL地址的形式，把表单数据提交到action URL。
注意:
get方式适合用来提交少量的、简单的数据。
post方式适合用来提交大量的、复杂的、或包含文件上传的数据。
在实际开发中，form表单的post提交方式用的最多，很少用get。例如登录、注册、添加数据等表单操作，都需要使用post方式来提交表单。
enctype
enctype属性用来规定在发送表单数据之前如何对数据进行编码。
它的可选值有三个，默认情况下，enctype 的值为application/x-www-form urlencoded,表示在发送前编码所有的字符。

注意:
在涉及到文件上传的操作时，必须将enctype的值设置为multipart/form-data
如果表单的提交不涉及到文件上传操作，则直接将enctype的值设置为application/x-www-form-urlencoded即可!

上面这些表单属性了解即可，毕竟可能以后再也不会用了。表单之所以被淘汰是有原因的
表单同步提交的缺点
①表单同步提交后，整个页面会发生跳转，跳转到action URL所指向的地址，户体验很差。
②表单同步提交后，页面之前的状态和数据会丢失。

为了解决上面这些问题，表单现在的作用渐渐变成了只作为收集数据，提交数据的事交给Ajax来用。

2.通过Ajax提交表单数据

如何获取表单中的数据？
首先在JQuery中，我们可以通过下面这两个监听事件来收集表单数据。
在这里插入图片描述
但是在表单提交中存在默认事件，因此我们在使用时应该用e.preventDefault();来清楚默认事件。（默认事件只的是在我们点击时提交按钮后，表单依旧会像后台发送数据)
当我们表单内容很多时，我们可以应该用serialize()函数来获取数据，serialize()函数可以一次性获取表单的全部内容，并作为一个对象返回。

下面这个就是一般的默认提交获取表单数据模板，相信我在实际开发中你调用的接口差不多也是这样的

    $('#formAddcmt').on('submit',function(e){   //表单监听事件
        e.preventDefault(); //清除默认事件
        var data = $(this).serialize();   //获取表单的全部数据
        $.post('http://www.liulongbin.top:3006/api/addcmt',data,  //ajax提交数据
            function(res){
                if(res.status !== 200) return alert('发表失败');
                else ....
            })
    })

好了，上面就是ajax的基本用法了，其它再多无非就是类型不一样，属于换汤不换药。如果已经掌握了，那恭喜你已经学会了ajax了，是不是很简单。
但是想成为优秀的开发者，怎么能只会调接口呢？接下来继续介绍ajax的实现来源，让我们加快脚步跟上吧。

六、XMLHttpRequest基本内容

1.什么是XMLHttpRequest？

XMLHttpRequest (简称xhr)是浏览器提供的Javascript 对象，通过它，可以请求服务器上的数据资源。所以我们刚刚所学的jQuery中的ajax函数,其实就是基于xhr对象封装出来的。.
在这里插入图片描述

2.使用xhr发起get请求

我来解释一下下面这些操作，首先我们需要像JS获取到一个XMLHttpRequest对象，接下来无论是的获取资源还是发送数据，都是基于JS的XMLHttpRequest对象来操作的。接下来就是open操作，应该写入类型和url，在这里如果想要传入参数的话，会比较麻烦，我后边一起解释，send函数就是发送ajax请求，并且我们返回回来的回调函数都会在onreadstatechange这个监听事件中进行。在函数里面的xhr.status想必不需要解释了吧？不懂的话建议补习一下计算机网络。
接下来让我们
沿着上边的话，在这里我解释一下xhr对象的请求状态readyState这个属性。
XMLHttpRequest对象的readyState属性，表示当前Ajax请求所处的状态。每个Ajax请求必然处于以下状态中的一个:
在这里插入图片描述
好了，我们来说下如何在xhr中传入参数，就像我们在ajax中传入data对象一样。在这里先介绍两个概念——查询字符串和URL编码。
什么是查询字符串？
查询字符串(URL 参数)是指在URL的末尾加上用于向服务器发送信息的字符串(变量)。
格式:将英文的?放在URL的末尾，然后再加上参数=值，想加上多个参数的话，使用&符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到URL中。
举个例子：
在这里插入图片描述
什么是URL编码？
URL地址中，只允许出现英文相关的字母、标点符号、数字,因此,在URL地址中不允许出现中文字符。如果URL中需要包含中文这样的字符,则必须对中文字符进行编码(转义)。
URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。
URL编码原则的通俗理解:使用英文字符去表示非英文字符。

浏览器提供了URL编码与解码的API，分别是:
encodeURI() 编码的函数
decodeURI() 解码的函数
举个例子：
在这里插入图片描述
那么如果我们要传入参数，就需要在open的url中用?分开url地址和参数，并且如果有多个键值则中间需要用&分割。

其实无论使用ajax(),还是使用get(),又或者直接使用xhr对象发起GET请求，当需要携带参数的时候，本质上,都是直接将参数以查询字符串的形式，追到URL地址的后面，发送到服务器的。

3.使用xhr发起post请求

post和get差不多，就是多了个设置属性的内容，这个直接照抄就行，同时send中就是我们传输的内容。
在这里插入图片描述

七、数据交换格式（JSON）

什么是数据交换格式？
数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。
前端领域，经常提及的两种数据交换格式分别是XML和JSON。其中XML用的非常少，所以,我们重点要学习的数据交换格式就是JSON.

其实就是我们在前后端传输时，有时候我们传输过来的内容很多或者用websocket协议传输时，这时候传过来的就不是对象而是一个字符串了，这个字符串就是JSON。因为JSON有专门的格式要求，所以我们可以快速解析字符串。

还是简单说下XML和JSON吧。

什么是XML?（没啥用的玩意，了解即可）
XML的英文全称是EXtensible Markup Language,即可扩展标记语言。因此, XML和HTML类似,也是一种标记语言。
XML和HTML虽然都是标记语言，但是,它们两者之间没有任何的关系。
●HTML被设计用来描述网页上的内容，是网页内容的载体
●XML被设计用来传输和存储数据，是数据的载体

一、什么是JSON？
概念: JSON的英文全称是JavaScript 0bjet Notation,即"javaScript对象表示法” .简单来讲，JSON就是Javascript 对象和数组的字符串表示法,它使用文本表示一个Js对象或数组的信息.因此，JSON的本质是字符串。

作用: JSON是一种轻量级的文本数据交换格式，在作用上类似于XML,专门用于存储和传输数据，但是JSON比XML小更快、更易解析。
现状: JSON 是在2001年开始被推广和使用的数据格式，到现今为止, JSON 已经成为了主流的数据交换格式。

二、JSON的两种结构

对象结构:对象结构在JSON中表示为{}括起来的内容。数据结构为{ key: value, key: value, … }的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、nul、数组、对象6种类型。
左边是不合法的JSON，右边才是合法的JSON
数组结构:数组结构在JSON中表示为[]括起来的内容。数据结构为[ “java”, “javascript”, 30, true …].数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

三、JSON和JS的互转
从JSON字符串转换为JS对象，使用JSON.parse()方法:

var obj = JSON.parse(' {"a": "Hello", "b": "World"}')
//结果是 => {a: 'Hello', b: 'World'}

从JS对象转换为JSON字符串，使用JSON.stringify()方法:

var json = JSON.stringify({a: 'Hello', b: 'World'})·
//结果是 => '{"a":"Hello"，"b":"World"} '

八、封装一个属于简易的Ajax

最后我们来运用前面的知识，封装出一个简易的ajax。
首先我们需要定义我们的ajax的效果，我们可以传入一个对象，这个对象ajax的方法，参数url，和回调函数的内容。
大概是这样的效果

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

因此在我们需要定义一个Ajax函数，并且传入一个对象。在此之前，我们需要完成一个函数getdata(),这个函数主要是用来获取参数的，因为我们需要实现get和post两种情况，并且咱们刚刚也介绍了在xhr中添加参数需要用查询字符串会比较繁琐，所以先获取到参数来处理掉，具体实现方法也非常简单。

function getdata(data){
    var a = [];
    for (var key in data){
        a.push(key + '=' + data[key]);
    }
    return a.join('&'); //最后在每个键直接插入&
}

最后我们来实现一个Ajax
思路很简单，就和之前介绍的xhr一样，在最后我们应该返回一个对象，所以我们需要将JSON字符串转化成一个对象。

function Ajax(op)
{
    var xhr = new XMLHttpRequest();

    // 把外界传递过来的参数对象，转换为 查询字符串
    var qs = getdata(op.data);

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

    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4 && xhr.status === 200){
            var res = JSON.parse(xhr.responseText);
            op.success(res);
        }
    }
}

总结

本文介绍了ajax的基本操作和实现原理，ajax是我们踏入前后端交互的第一步，文章内容量很大，涉及细节很多如果不了解的话可以细细琢磨。码字不易，如果觉得有帮助的话点个👍感谢支持。
在这里插入图片描述

老帅比阿

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
一文带你解决Ajax！

Ajax应该是我们前后端交互的第一节，所以其重要性可想而知。而且事实上Ajax在实际开发中也是非常常用。并且Ajax这个知识点不难，本文会从源头和你步步刨析Ajax，最后动手实现一个简易版的Ajax轮子。首先我们来明确什么是客户端和服务器。其实这个很简单，比如我们的上网搜索的电脑就是客户端，客户端是用来获取服务器的数据的，我们在百度搜索内容是，百度的页面数据其实都是百度公司的服务器发来我们页面的。而获取数据这个过程，这就是用Ajax来完成。在此之前，我们需要把一些基础知识进行介绍，以免后边看得时候会一脸懵
复制链接

扫一扫