AJAX入门基础

【前言】

最近看了看AJAX的一些相关，也对AJAX进行了一些资料查询，本篇博客首先对AJAX入门的基础知识进行简介！详情请见下文！

【正文】

一、What——什么是AJAX？

1、概念

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

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

2、特点：

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

◆创建快速动态网页

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

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

这里再对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 () { }                   //请求成功后调用的回调函数
})

◆参数解说

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

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

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

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

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

◇“同步”先生：

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

◇“异步”女士：

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

◇结局：

“异步”女士胜利

◇◇小结：

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

2、XMLHttpRequest对象——

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

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

①onreadystatechange属性

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

②readyState属性

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

◆属性值

◆例子：

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

③responseText属性

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

◆例子：

对对对

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