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;
}
}