前端学习之ajax入门和发送请求

最新推荐文章于 2023-04-22 15:30:58 发布

前端扫地僧

最新推荐文章于 2023-04-22 15:30:58 发布

阅读量525

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_45839045/article/details/123301547

版权

Ajax

Ajax 的概念

在浏览器中，我们可以在不刷新页面的情况下，通过ajax的方式去获取一些新的内容。

Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。
发送 Ajax 请求的五个步骤

其实也就是 使用 XMLHttpRequest 对象的五个步骤。

我们先回忆一下，一个完整的HTTP请求需要的是：

请求的网址、请求方法get/post。

提交请求的内容数据、请求主体等。

接收响应回来的内容。

发送 Ajax 请求的五个步骤：

（1）创建异步对象。即 XMLHttpRequest 对象。

（2）使用open方法设置请求的参数。open(method, url, async)。参数解释：请求的方法、请求的url、是否异步。

（3）发送请求。

（4）注册事件。注册onreadystatechange事件，状态改变时就会调用。

如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。

（5）获取返回的数据。
Ajax 请求：get 请求举例

（1）index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送get_ajax请求" id='btnAjax'>

<script type="text/javascript">
    // 绑定点击事件
    document.querySelector('#btnAjax').onclick = function () {
        // 发送ajax 请求 需要 五步

        // （1）创建异步对象
        var ajaxObj = new XMLHttpRequest();

        // （2）设置请求的参数。包括：请求的方法、请求的url。
        ajaxObj.open('get', '02-ajax.php');

        // （3）发送请求
        ajaxObj.send();

        //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
        //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
        ajaxObj.onreadystatechange = function () {
            // 为了保证 数据 完整返回，我们一般会判断 两个值
            if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
                console.log('数据返回成功');

                // 数据是保存在 异步对象的 属性中
                console.log(ajaxObj.responseText);

                // 修改页面的显示
                document.querySelector('h1').innerHTML = ajaxObj.responseText;
            }
        }
    }
</script>
</body>
</html>

早期的前后端使用表单进行交互

` 标签的属性(⭐⭐⭐)

`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 方式适合用来提交大量的，复杂的，或包含文件上传的数据

`enctype`

enctype属性用来规定在 发送表单数据之前如何对数据进行编码

它的可选值有三个，默认情况下，enctype的值为 application/x-www-form-urlencoded，表示在发送前编码的所有字符

表单的同步提交及缺点

什么是表单的同步提交

通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交

表单同步提交的缺点

<form> 表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差
<form> 表单同步提交后，页面之前的状态和数据会丢失

如何解决呢？

表单只复杂采集数据，Ajax负责将数据提交到服务器

通过Ajax提交表单数据

监听表单提交事件

在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件

阻止表单默认提交行为

当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转

如何快速获取表单数据

`serialize()` 函数

为了简化表单中数据的获取操作，jQuery提供了 serialize() 函数，语法格式如下：

**好处：**可以一次性获取表单的数据

**注意：**在使用 serialize() 函数快速获取表单数据时，**必须为每个表单元素添加 name 属性

为了避免在js代码中复制大量的html代码，我们引入模板引擎
art-template 是一个简约，超快的模板引擎http://aui.github.io/art-template/zh-cn/index.html

art-template使用步骤

导入 art-template
- 在window全局，就多了一个函数，叫做 template(‘模板id’，需要渲染的数据对象)
```
<script src="./lib/template-web.js"></script>
```
定义数据
```
var data = { name: 'zs', age: 20}
```
定义模板
- 模板的 HTML 结构，必须定义到 script 标签中，注意：需要把type属性改成 text/html
- 给模板添加一个 id
- 模板里面如果需要使用到传入的数据，利用 {{}} 来实现，例如：{{name}}，那么就会去找我们调用 template() 函数第二个参数里面对应的name属性的值
```
<script type="text/html" id="tpl-user">
    <h1>{{name}}    ------    {{age}}</h1>
</script>
```
调用 template 函数
- 函数的返回值就是拼接好的模板字符串
```
var htmlStr = template('tpl-user', data)
```
渲染HTML结构
- 最后我们需要把template返回的模板字符串设置到页面容器中
```
$('#container').html(htmlStr)
```

标准语法

什么是标准语法

art-template 提供了 {{}} 这种语法格式，在 {{}} 内可以进行 变量输出 或 循环数组 等操作，这种 {{}} 语法在 art-template 中被称为标准语法

输出

在 {{}} 语法中，可以进行变量的输出，对象属性的输出，三元表达式输出，逻辑或输出，加减乘除等表达式输出

原文输出

如果输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染

条件输出

如果要实现条件输出，则可以在 {{}} 中使用 if…else if…/if 的方式，进行按需输出

循环输出

如果要实现循环输出，则可以在{{}} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前循环项使用 $value 进行访问

过滤器

过滤器本质就是一个 function 函数

语法

过滤器语法类似于 管道操作符，它的上一个输出作为下一个输入

定义过滤器的基本语法如下：

案例-格式化时间过滤器

定义数据
```
var data = { regTime: new Date() }
```

定义过滤器

// 定义处理时间的过滤器
template.defaults.imports.dateFormat = function (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()

      return y + '-' + m + '-' + d
}

在模板引擎中使用过滤器

  <script type="text/html" id="tpl-user">
    <h3>{{regTime | dateFormat}}</h3>
  </script>

模板引擎的实现原理

正则与字符串操作

exec函数

exec() 函数用于 检索字符串 中的正在表达式的匹配

如果字符串中又匹配的值，则返回该匹配值，否则返回 null

示例代码如下：

分组

正则表达式中（）包起来的内容表示一个分组，可以通过分组来 提取自己想要的内容，示例代码如下

字符串的 replace 函数

replace() 函数用于在字符串中用一些字符替换另一些字符的

使用循环来replace

因为用户输入的字符串长度不确定，我们replace次数不确定，所以我们可以利用while循环来进行

前端扫地僧

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫