Ajax详解

目录

一、为什么使用Ajax?

二、Ajax说明

  概念

  作用

三、Ajax的特点和优势

  特点        

  优势

四、异步和同步

 1.同步发动请求

 2.异步发送请求

五、Ajax的工作流程

 1.传统web执行方式

 2.Ajax执行方式

五、Ajax的使用

1. XmlHttpRequest核心对象

 概念

 语法

 常用属性

 常用方法

 老版本IE兼容问题

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

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

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

(2) 概念

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

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

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

一、为什么使用Ajax?

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

二、Ajax说明

  概念

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

  作用

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

三、Ajax的特点和优势

  特点        

  1. 语言: JavaScript是实现Ajax技术所使用的主要开发语言
  2. Ajax引擎: 即xmlHttpRequest核心对象,可以用异步的形式在浏览器和服务器之间传送数据。
  3. 数据格式: 传送数据时,有几种常用的数据格式,如: 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();  

 常用属性

属性名称                                                说明
onreadystatechange设置回调函数,作为readyState属性值改变时的事件处理程序
readyState

返回请求的当前状态,取值从0到4变化。

0——未初始化

1——已初始化

2——请求发送完成

3——开始读取响应

4——读取响应结束

status

返回当前请求的Http状态码

常用值举例:

200——正确返回

404——找不到访问对象

statusText返回当前请求的响应行状态
responseText以文本形式获取响应值
responseXML                                               已XML形式获取响应值,并且解析成DOM对象返回

 常用方法

方法说明

open(String method,String url,boolean

async,String user,String password)

创建一个新的HTTP请求。

method参数: 提交方式POST,GET等等,大小写不敏感

url: 请求的url

async: 可选,指定此请求是否为异步方法,默认为true.

user: 参数,可选,指定用户名

password: 可选,验证信息中的密码

send(String data)

发送请求到服务器端

data参数: 如果请求是get方式,可指定为null,否,是POST,需要指定参数

abort()取消当前请求

setRequestHeader(String header,

String value)

设置请求头信息

header参数: 指定的HTTP头部名称

value参数: 指定的HTTP头部名称对应的值

getResponseHeader(String header)从响应中获取指定的HTTP头信息
getAllReponseHeaders()获取响应的所有HTTP头信息

 老版本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()方法的常用配置参数

参数        类型说明
urlString请求的URL,默认为当前页的地址
type        String请求方式: 如: get post 等等
dataString,Array,或..发送服务器端的数据,也就是参数
dataTypeString服务器返回的数据类型,有:XML,HTML,JSON,Text..
sucessFunction(任意类型)请求成功后调用的函数
errorFunction(...)请求失败时调用的函数
completeFunction(...)请求完成后调用的函数,相当于java异常中的finally

(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去传递数据的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值