一、为什么使用Ajax?

在没有使用Ajax之前，我们使用传统web技术时，每次客户端会同步发送请求,服务器都需要加载整个页面，直到请求完毕后才发出响应，如果页面内容量大，那加载页面的时间会留出空白，导致有很差的用户体验等等，所以Ajax在这个问题上进行了补充。

二、Ajax说明

概念

Ajax全称为 Asynchronous JavaScript and Xml,由JavaScript、CSS、XML等几种技术整合而成。

作用

Ajax实现了页面无刷新加载，在需要的时候可以只更新页面的一小部分内容，而不必重新生成整个页面。

三、Ajax的特点和优势

特点

语言： JavaScript是实现Ajax技术所使用的主要开发语言
Ajax引擎: 即xmlHttpRequest核心对象，可以用异步的形式在浏览器和服务器之间传送数据。
数据格式: 传送数据时，有几种常用的数据格式，如: JSON,XML,HTML

优势

●避免重复加载
●提高了加载速度
●优化了用户体验

四、异步和同步

1.同步发动请求

说起同步，我们的传统web就是同步发送请求，那么同步是什么呢？——浏览器发送了一个请求，服务器去处理请求时，必须要将请求处理完成后，才可以做出响应。

2.异步发送请求

JavaScript就是一个异步，而我们的Ajax就是基于JS去实现的，那么什么是异步呢?——浏览器发送了一个请求，服务器去处理请求，你去处理你的，我照样往下执行，等我要响应的时候，自然会把处理好的响应数据给到浏览器去局部更新页面，实现无刷新加载页面。
五、Ajax的工作流程 #

1.传统web执行方式

这里找不到流程图，所以我口说，哈哈哈。

传统web执行方式: 当浏览器发送请求后，比如说发送的资源是动态资源，也就是jsp等等，服务器接收请求并去处理，等待处理完成后服务器发出响应，浏览器接收并且显示。

2.Ajax执行方式

**Ajax执行方式: **当用户界面触发某个事件后调用JavaScript,通过Ajax引擎即xmlHttpResquest核心对象发出异步请求，服务器接收并处理请求,服务器不会等待响应的数据，而是继续往下执行，当执行回调函数时，响应的数据会自动拿到，回调函数处理响应，并使用DOM+CSS技术利用返回的数据局部更新页面内容。

注意:服务器响应以XML、JSON或HTML格式返回数据或者普通文本。

六、Ajax的使用

1. XmlHttpRequest核心对象

概念

XmlHttpRequest对象是Ajax技术的核心，用于与服务器进行交互，它可以在不刷新当前页面的情况下向服务器发送特定的URL异步发送请求，获取数据，从而在当前页面中显示局部更新的效果。

语法

     xmlHttpRequest=new XMLHttpRequest(); 

常用属性

常用方法

老版本IE兼容问题

在IE浏览器(IE5和IE6)中创建XmlHttpRequest的方式和现在的版本的方式不同，为了使程序兼容更好,语法如下:

xmlHttpRequest=new ActiveXObjext("Microsoft.XMLHTTP");

2.原生Ajax的创建及使用方式

以验证手机号是否已经注册为例

Html代码

    <form action="#">
        手机号: <input type="text" id="phone" name="phone" οnblur="checkPhone()"><span id="error"></span> <br>
        <input type="submit" value="注册">
    </form>

Ajax的创建及发送请求

    /**
             * 检验手机号是否已注册
             */
            function checkPhone() {
                //获取手机号
                var phone = document.getElementById("phone").value;
                //解决浏览器兼容问题
                if (window.XMLHttpRequest) {
                    //创建Ajax核心对象
                    xmlHttpRequest = new XMLHttpRequest();
                } else {
                    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                }
                var url = "/demo/phoneServlet";
                //创建回调函数
                xmlHttpRequest.onreadystatechange = callback;
                //创建异步请求
                // xmlHttpRequest.open("GET",url,true);
                xmlHttpRequest.open("POST",url,true);
                //使用POST需设置请求头信息
                xmlHttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                //发送请求
                xmlHttpRequest.send("phone="+phone);
            }
     
             //回调函数 : 处理响应 显示DOM+CSS
            function callback() {
                if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200)
                {
                    //接收响应文本数据
                    var data = xmlHttpRequest.responseText;
                    if (data == "true") {
                        document.getElementById("error").innerHTML = "手机号已被注册!";
                        document.getElementById("error").style.color = "red";
                    } else {
                        document.getElementById("error").innerHTML = "手机号可以注册";
                        document.getElementById("error").style.color = "green";
                    }
     
                }
            }

3.使用JQuery简化Ajax技术的实现

(1) 为什么使用JQuery来简化Ajax?

在使用原生JavaScript实现了Ajax无刷新技术，实现过程很复杂，又要考虑浏览器兼容问题，所以使用JQuery会很简洁。

(2) 概念

JQuery将Ajax的操作都进行了封装，通过调用一个方法就可以完成发送请求和处理复杂格式的响应结果，简洁方便且结构清晰。

(3)核心方法——$.ajax()

    $.ajax([settings])  //settings是ajax方法的参数,用于配置Ajax请求的键值对集合

(4)$.ajax()方法的常用配置参数

(5)JQuery对Ajax进行封装的使用方式

     function  checkPhone()
        {
            $.ajax({
                "url" : "/demo/phoneServlet",
                "type": "POST",
                "data": "phone="+$("#phone").val(),
                "dataType": "text",
                "success": callBack,
                "error":function ()
                {
                    alert("手机验证时出现错误，请稍后再试!");
                }
     
            });
            //响应成功时的回调函数
            function  callBack(data)   //参数表示响应结果
            {
               if(data=="true")
               {
                   $("#error").html("手机号已被注册!");
                   $("#error").css("color","red");
               }else
               {
                   $("#error").html("手机号可以注册!");
                   $("#error").css("color","green");
               }
     
            }
        }

JQuery对Ajax的各种功能都进行了封装，调用.ajax()就不需要像原生Ajax一样去写繁琐的open,send,以及请求的处理，他的处理信息都在ajax(settings)的配置参数中,在这里$.ajax() 的数据是使用键值对的形式也就是JSON去传递数据的。