AJAX入门基础

曾经终败给现在 2022-06-01 05:26 236阅读 0赞

一、What——什么是AJAX？

1、概念

AJAX（Asynchronous JavaScript And XML）不是一种新的编程语言，是指一种创建交互式网页应用的网页开发技术。

使用JavaScript向服务器提出请求并处理响应而不阻塞用户，通过核心对象XMLHTTPRequest，JavaScript可在不重载页面的情况下与web服务器交换数据，即在**不**需要**刷新页面**的情况下，就可以**产生局部刷新**的效果

2、特点：

◆异步JavaScript和XML（标准通用标记语言的子集）

◆创建快速动态网页

◆无需重新加载整个网页的情况下，能够更新部分网页

3、AJAX与Web开发的区别——

![SouthEast][]

这里再对AJAX与传统web开发的区别中的**页面端**进行说明一下：

（1）、传统方式：

◆本质：

浏览器做了很多数据组织和提交的工作

◆表面：

①页面代码简单

②submit按钮提交数据，表单管理数据。

③input中定义name属性。  
（2）、AJAX方式：

◆本质：

需要自己编写代码进行数据的组织，提交，接收，并进行页面的更新

◆表面：

①页面代码量大

②通过button的一个onclick事件转向js的方法，然后通过编写的js代码来获取数据，发送数据，接收数据。

③input中定义id属性。页面中预留了div标签，自己编写js代码将div标签中的内容更新。

二、When——何时用AJAX？

小菜使用AJAX并不多，但是之前接触过一点点，最近也查了一些资料，下面就根据个人目前的了解，说说自己的理解！

1、请求的提交是为了页面数据的显示，这时用户一般不想看到页面的刷新，此时便可以使用AJAX

2、如果请求提交后，用户能从页面感觉到提交结果，此时也最好不要刷新页面可以使用AJAX

3、使用AJAX的常见实例：谷歌地图、百度搜索（键入值下面弹出的提示框）等等

三、How ——怎么用AJAX？

看到的视频里基本上都是在使用XMLHttpRequest对象来做页面局部刷新，而小菜我之前接触到的是使用$.ajax()\{\}函数，$.ajax()\{\}是封装到ajax里的一个函数，相比XMLHttpRequest对象来做页面局部刷新更为方便，下面对两种方法都做一个简单介绍。

1、AJAX函数

（1）、When——何时用

一般在前端HTML和服务器交互又要异步提交表单时会用到$.ajax()\{\}函数

（2）、How——怎么用

◆函数格式

//函数格式
    $.ajax({
        url: "url",                                     //请求的服务器地址
        type: "GET/POST",                              //请求的方式，有POST和GET两种
        dataType: "json/jsonp/script/text/html/xml",  //预期服务器返回的数据类型
        data: "data",                                //发送到服务器的数据
        async: false,                               //所有请求是同步还是异步
        success: function () { }                   //请求成功后调用的回调函数
    })

◆参数解说

![SouthEast 1][]

①type:请求的方式有两种POST和GET，下面说说这两者的区别

◇POST：是向指定的资源提交要处理的数据

◇GET：是从指定的资源请求数据

②async:用生活中的小例子简单说说同步与异步的区别  
   **◇**假设条件：

今天午餐的主食是米饭，菜是西红柿鸡蛋，现在有一位“同步”先生和“异步”女士，两位pk做饭，看谁快

**◇**“同步”先生：

先把米饭放电饭锅里蒸煮，然后一边玩手机一边等待米饭熟了之后再菜

**◇**“异步”女士：

先把米饭放电饭锅里蒸煮，随后在米饭煮着的同时就开始炒菜

**◇**结局：

“异步”女士胜利

**◇****◇小结**：

AJAX的同步异步就如上面的生活小例子，如果是异步的话，不管ajax的执行请求有没有返回，代码会继续往下执行；如果是同步的话，只有ajax请求完成返回数据之后代码才能继续往下执行

2、XMLHttpRequest对象——

（1）、XMLHTTPRequest五步使用法：  
    ①建立XMLHTTPRequest对象  
    ②注册回调函数  
    ③使用open方法设置和服务器端交互的基本信息  
    ④设置发送的数据，开始和服务器端的交互  
    ⑤在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器端返回的数据，更新页面内容

（2）、XMLHttpRequest三个重要属性：

①onreadystatechange属性

该属性存有处理服务器响应的函数，当readyState变化时会调用这个属性上注册的JavaScript函数

②readyState属性

◆该属性存有服务器响应的状态信息，每当readyState改变时，onreadystatechange函数就会被执行。

◆属性值

![SouthEast 2][]

◆例子：

//测试响应是否已完成，即可以得到数据了
    xmlHttp.onreadystatechange = function () {
        //如果请求已完成，就从response中获得数据
        if (xmlHttp.readyState == 4) {
            // 从服务器的response获得数据
        }
    }

③responseText属性

◆该属性可以取回由服务器返回的数据。

◆例子：

对对对

xmlHttp.onreadystatechange = function () {
        //如果请求完成，把时间文本框的值设置为等于 responseText：
        if (xmlHttp.readyState == 4) {
            document.myForm.time.value = xmlHttp.responseText;
        }
    }

[SouthEast]: /images/20220601/69baf62ccbb3441190ad907bcccb2266.png
[SouthEast 1]: /images/20220601/470754c8f1404c13b9d5ead0c4578fb7.png
[SouthEast 2]: /images/20220601/6b330770af564c1f9aeadd49da27c285.png