AJAX 入门

时间：2022-09-13 08:27:10

1. 同步交互与异步交互

1.1 同步交互
  • 客户端发送一个请求, 需要等待服务器的响应结束,才能发送第二个请求!
  • 刷新的是整个页面.
1.2 异步交互
  • 客户端发送一个请求,无需等待服务器的响应,然后就可以发送第二个请求!
  • 可以使用 js 接收服务器的响应,然后使用 js 来局部刷新.

2. AJAX 概述

  1. AJAX: ansynchronous javascript and xml, 异步的 js 和 xml;
  2. 它能使用 js 访问服务器,而且是异步访问!
  3. 通常服务器给客户端响应的是一个完整的 html 页面!但在 ajax 中因为是局部刷新,那么服务器就不用

    再响应整个页面,而只是数据,其中的数据格式包括:
    • text: 纯文本;
    • xml
    • json: js 提供的数据交换模式.

3. ajax 的优缺点

3.1 优点:
  • 异步交互: 增强了用户体验!
  • 性能: 因为服务器无需再响应整个页面, 只需要响应部分内容,所以服务器的压力减轻了.
3.2 缺点
  • ajax 不能应用在所有场景;
  • ajax 无端增多了对服务器的访问次数,给服务器带来了压力.

4. ajax 发送异步请求(四步操作)

第一步,得到 XMLHttpRequest 对象

  • 大多数浏览器都支持: var xmlHttp = new XMLHttpRequest();
  • IE 6.0 : var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  • IE 5.5 以及更早版本的IE: var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
// 创建获取 XMLHttpRequest 对象的函数

    function createXMLHttpRequest(){

        try{

            return new XMLHttpRequest();

        }catch(e){

            try{

                return new ActiveXObject("Msxml2.XMLHTTP");

            }catch(e){

                try{

                    return new ActiveXObject("Microsoft.XMLHTTP");

                }catch(e){

                    throw e;

                }

            }

        }

    }

第二步, 打开与服务器的连接

  1. xmlHttp.open(): 用来打开与服务器的连接, 它需要三个参数:
    • 请求方式: GET 或 POST;
    • 请求的 URL: 指定服务器端的资源, 例如: /day23_1/AServlet;
    • 请求是否为异步: 如果为 true,表示发送异步请求, 否则为同步请求!
    • 示例: xmlHttp.open("GET","/day23_1/AServlet",true);

第三步, 发送请求

  1. xmlHttp.send(null): 必须带参数 null, 如果不给参数, 可能会造成 FireFox 浏览器无法发送!
    • 参数: 就是请求体的内容. 如果是 GET 请求,没有请求体,但必须给出 null.

第四步, 接收响应

  1. 在 xmlHttp 对象的一个事件上注册监听器: onreadystatechange.
  2. xmlHttp 对象一共有五种状态:
    • 0: 初始化未完成状态,只是创建了 XMLHttpRequest 对象,还未调用 open() 方法;
    • 1: 请求已开始, open()方法已调用, 但还没调用 send() 方法;
    • 2: 请求发送完成状态, send() 方法已调用;
    • 3: 服务器已经开始响应, 但不表示响应结束了;
    • 4: 服务器响应结束.(通常我们只关心这个状态!!!)
//得到 xmlHttp 对象的状态, 可能结果: 0, 1, 2, 3, 4

    var state = xmlHttp.readyState;

// 得到服务器响应的状态码, 可能结果: 200, 404, 500

    var status = xmlHttp.status;

// 得到服务器响应的内容

//    var content = xmlHttp.responseText; // 得到服务器响应的文本格式的内容

//    var content = xmlHttp.responseXML; // 得到服务器响应的 xml 格式的内容, 它是 document 对象

    // 注册监听器

    xmlHttp.onreadystatechange = function(){

        // 双重判断

        if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

            // 获取服务器的响应内容

            var text = xmlHttp.responseText;

        }

    }

5. ajax 示例

// 示例一: 发送 POST 请求

    <html>

        <head>

            <script type="text/javascript">

                function createXMLHttpRequest(){

                    try{

                        return new XMLHttpRequest();

                    }catch(e){

                        try{

                            return new ActiveXObject("Msxml2.XMLHTTP");

                        }catch(e){

                            try{

                                return new ActiveXObject("Microsoft.XMLHTTP");

                            }catch(e){

                                throw e;

                            }

                        }

                    }

                }

                // html 页面加载完成后执行

                window.onload = function(){

                    var btn = document.getElementById("btn");

                    btn.onclick = function(){

                        var xmlHttp = createXMLHttpRequest();

                        xmlHttp.open("POST","<c:url value='/AServlet'/>",true);

                        // 设置 Conten-Type 请求头

                        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                        // 发送请求时, 指定请求体

                        xmlHttp.send("username=zhangsan&password=123");

                        // 注册监听器

                        xmlHttp.onreadystatechange = function(){

                            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

                                var text = xmlHttp.responseText;

                                var h1 = document.getElementById("h1");

                                h1.innnerHTML = text;

                            }

                        };

                    }

                }

            </script>

        </head>

        <body>

            <button id="btn">点击这里</button>

            <h1 id="h1"></h1>

        </body>

    </html>

// 示例二: 响应内容为 xml 数据

// 服务端需要设置响应头: response.setContentType("text/xml;charset=utf-8");

// 客户端需要使用 var doc = xmlHttp.responseXML; 获取 Document 对象;

// xml 文件

<?xml version="1.0" encoding="UTF-8"?>

<students>

    <student number="1001">

        <name>zhangsan</name>

        <age>23</age>

        <sex>male</sex>

    </student>

</students>

// a.jsp

<html>

</head>

    window.onload = function(){

        var btn = document.getElementById("btn");

        btn.onclick = function(){

            var xmlHttp = createXMLHttpRequest();

            xmlHttp.open("GET","<c:url value='/BServlet'/>",true);

            xmlHttp.send(null);

            xmlHttp.onreadystatechange = function(){

                if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

                    var doc = xmlHttp.responseXML;

                    var ele = doc.getElementsByTagName("student")[0];

                    var number = ele.getAttribute("number");

                    var name = ele.getElementsByTagName("name")[0].textContent;

                    var age = ele.getElementsByTagName("age")[0].textContent;

                    var sex = ele.getElementByTagName("sex")[0].textContent;

                    var text = number+":"+name+","+age+","+sex;

                    doc.getElementById("h1").innerHTML = text;

                }

            };

        };

    };

</head>

<body>

    <button id="btn">点击这里</button>

    <h1 id="h1"></h1>

</body>

</html>

示例三: 省市联动

5. 模拟 JQuery 的 AJAX 请求

//创建 request 对象

    function createXMLHttpRequest(){

        try{

            return new XMLHttpRequest();

        }catch(e){

            try{

                return ActiveXObject("Msxml2.XMLHTTP");

            }catch(e){

                try{

                    return ActiveXObject("Microsoft.XMLHTTP");

                }catch(e){

                throw e;

                }

            }

        }

    }

    function ajax(option){

        /*

         * 分析:

         *    参数 option 对象需要具有如下内容:

         *　   请求方式 method,

         *     请求的 URL  url,

         *     是否异步  asyn,

         *     请求体    params,

         *     回调方法  callback,

         *     服务器响应数据转换成什么类型  type

         */

        // 1. 得到 xmlHTTP

         var xmlHttp = createXMLHttpRequest();

        // 2. 打开连接

        if(!option.method){ // 如果method参数不存在,默认为 GET 请求

            option.method="GET";

        }

        if(option.asyn == undefined){ // 默认异步处理

            option.asyn = true;

        }

        xmlHttp.open(option.method,option.url,option.asyn);

        // 判断是否为 POST

        if("POST" == option.method){

            xmlHTTP.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        }

        // 发送请求

        xmlHttp.send(option.params);

        // 注册监听

        xmlHttp.onreadystatechange = function(){

            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

                var data;

                // 获取服务器的响应数据,进行转换

                if(!option.type){

                    data = xmlHttp.responseText;

                } else if(option.type == "xml"){

                    data = xmlHttp.responseXML;

                } else if(option.type == "text"){

                    data = xmlHttp.responseText;

                } else if(option.type == "json"){

                    var text = xmlHttp.responseText;

                    data = eval("("+text+")");

                }

                // 执行回调方法

                option.callback(data);

            }

        };

    }

参考资料:

AJAX 入门的更多相关文章

  1. 掌握 Ajax，第 1 部分&colon; Ajax 入门简介

    转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...

  2. AJAX入门---DOM操作HTML

    AJAX入门---DOM操作HTML 一边学习AJAX一边坐着总结加深印象.上次写的是怎样简单的使用XMLHttpRequest对象.今天写的是DOM(文档对象模型(Document Object M ...

  3. ajax入门之建立XHR对象 &lpar;1&rpar;

    ajax入门之建立XHR对象 今天帮朋友写了一个简单的ajax的demo,发现了一些东西,决定写一篇文章记录一下,避免以后挖坑. 创建XMLHttpRequest 通常 function create ...

  4. ASP&period;NET AJAX入门系列（4）：使用UpdatePanel控件（一）

    UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...

  5. ASP&period;NET AJAX入门系列（1）：概述

    经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...

  6. ASP&period;NET AJAX入门系列

    ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...

  7. 系列文章--ASP&period;NET之AJAX入门教程

    ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...

  8. Ajax入门（二）Ajax函数封装

    如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...

  9. AJAX入门---点滴的积累

    AJAX入门---点滴的积累 每次学习完一个内容总会写上几句话总结一下学习的内容.这不刚看完王兴魁老师讲的AJAX核心技术.如今回想梳理一下. 这套视频的内容不多,简单的解说了XMLHttpReque ...

  10. JavaEE的ajax入门

    JavaEE的ajax入门 代码下载 链接:https://pan.baidu.com/s/1pb_sdSmV9Ncs6UIz3q2ztg 提取码:fgx6 复制这段内容后打开百度网盘手机App,操作 ...

随机推荐

  1. 高性能javascript学习笔记系列&lpar;2&rpar;-数据存取

    参考 高性能javascript Tom大叔深入理解javascript系列 相关概念 1.执行上下文   当控制器转到ecmascript可执行代码的时候,就会进入一个执行上下文,执行上下文是以堆栈 ...

  2. Spring3系列2 -- 松耦合的实现

    Spring3系列2 -- 松耦合的实现 一.      环境 spring-framework-3.2.4.RELEASE jdk1.7.0_11 Maven3.0.5 eclipse-jee-ju ...

  3. PHP 判断数组里的值是否有存在

     一维数组检测<?php  $a = array('as','ddf','ddf','as','qwe','wer','ert'); $res = array_unique($a); var_d ...

  4. javascript 中this的使用场景全

    1. global this 2.function this 3.prototype this 4. object this 5.DOM this 6 HTML this 7 override thi ...

  5. 剑指offer&lowbar;&lpar;17&rpar;

    题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) public class Solution17 { /*思路:参考剑指offer 1.首先设置标志 ...

  6. Kali Linux中下载工具Axel的安装和使用

    前言: Axel是一个多线程的HTTP/FTP下载工具,支持断点续传. Axel的安装 apt-get install axel Axel的卸载 apt remove axel 安装完成之后输入 ax ...

  7. Nacos系列：欢迎来到Nacos的世界！

    什么是Nacos? Nacos 是构建以"服务"为中心的现代应用架构 (例如微服务范式.云原生范式) 的服务基础设施. Nacos可以做什么? 1.动态配置服务:支持以中心化.外部 ...

  8. 行为型---状态者模式（State Pattern）

    状态者模式的介绍 每个对象都有其对应的状态,而每个状态又对应一些相应的行为,如果某个对象有多个状态时,那么就会对应很多的行为.那么对这些状态的判断和根据状态完成的行为,就会导致多重条件语句,并且如果添 ...

  9. K2助力大鹏绿色环保之路

    K2和大鹏结缘可以追溯到2006年,两家践行绿色环保理念的公司一拍即合,开始了十余年的合作之路,在“绿色环保”的路上留下了坚实的脚印. 绿色能源:LNG   广东大鹏液化天然气有限公司成立于2004年 ...

  10. JavaScript入门经典（第四版）读书笔记

    第一部分 Web脚本编写与JavaScript语言的概念 1.document.lastModified()    ->    返回文档修改日期 2.<head>标签中的<sc ...

相关文章