五、Ajax 入门

2017-12-22  本文已影响0人  cqzhangjian

Ajax其实 (Asynchronous Jascript And XML) ：是指异步 Javascript 以及XML, Ajax 不是一门新的技术、它也不是一门特有的语言。它是一种被 google 公司推广的一门旧的技术，新的用法。这里的旧的技术指的一套技术组合(DOM、CSS、Javascript、浏览器支持的 XMLHttpRequest 对象)

1. 原生方式开发 Ajax 步骤：

  1. 创建 XMLHttpRequest 对象，考虑到 浏览器版本的问题，比如 IE6以下的版本就不支持 XMLHttpRequest 对象，但是支持 ActivieXObject。所有在创建 Ajax 核心对象，代码应该如下:
function getXHR() {
        //定义一个 ajax 核心对象的引用
        var xhr;
        if(window.XMLHttpRequest){
            //ie6以上支持的,其他的浏览器都支持
            xhr =  new XMLHttpRequest();
        }else {
            // ie6 以下支持的
            xhr =new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;
}
  1. 注册监听器监听 XMLHttpRequest 状态，使用 XMLHttpRequest 对象中的 onreadystatechange 事件
hrx.onreadystatechange = function () {
                if(hrx.readyState == 4 && hrx.status == 200) {
                    document.getElementById("showInfo").innerHTML = hrx.responseText;
                }
            }
  1. 设置 ajax 连接信息,通过调用 XMLHttpRequest 中的open 方法
hrx.open("get","ajax.do",true);
  1. 发送 ajax 请求 ，通过 调用 XMLHttpRequest 对象中的 send 方法
hrx.send();

完整代码:

<script type="text/javascript" src="getHXR.js"></script>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("sendAjax").onclick =function () {
            //1.创建 hrx
            var hrx = getXHR();
            //2.注册一个监听ajax 请求的状态
            hrx.onreadystatechange = function () {
                if(hrx.readyState == 4 && hrx.status == 200) {
                    document.getElementById("showInfo").innerHTML = hrx.responseText;
                }
            }
            //3.ajax 请求的方式以及 请求的 url地址
            hrx.open("get","ajax.do",true);
            //4.使用 核心对象 hrx 发送 ajax 请求
            hrx.send();
        }
    }
</script>

1.1 XMLHttpRequest 核心对象详解

open 方法：
方法：open（String method，String url，boolean async）
作用: 建立连接
参数解析：
method：ajax 请求方式 get 、 post
url：请求资源地址 eg: ajax.do
async ： ajax 请求是是否为异步 默认true，异步

send 方法：
方法：send（String data）
作用：发送 ajax 请求正文 数据，只有 post 方式，所有如果ajax 请求是get 方式，不能在 send 方法中设置请求数据，如果是post 方式在发送 正文数据前，应该设置请求头，
setRequestHeader（String headerName,String headerValue）; 设置请求消息头。
eg:hrx.setRequestHeader（"Content-type","application/x-www-form-urlencoded"）;

2.使用 Jquery 封装好的Ajax

Jquery 对原生的 Ajax 请求 进行三类封装:
第一类简单的封装:$.ajax(); 要讲
第二类进一步封装:$.get() 、$.post(); 要讲
第三类再再进一步封装:$.getJson 、$.getScript

2.1.$.ajax()

    //请求数据的格式： 1.key/value 数据格式
    //          2.json 数据格式
    var json = {"name":"John","location":"Boston"};
    $(function() {
        $("#sendAjax").click(function() {
            //1.发送ajax 请求
            $.ajax({type : "post",
                //请求资源地址
                url : "ajax.do",
                //请求携带的请求数据
                data : json,
                //readyState =4 state = 200 处理成功后的事件
                success : function(msg) {
                    //$("#showInfo").text(msg);
                    //console.info(msg);
                    alert(msg.name);
                    alert(msg.location);
                }
            });
        });
    });

2.2.$.get()

<script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>
<script type="text/javascript">
    var json = {"name":"John","location":"Boston"};
    // get请求方式的ajax
    $(function () {
        $("#sendAjax").click(function () {
            $.get("ajax.do",json,function (msg){
                alert(msg);             
            });
        });
    });
</script>

2.3.$.post()

<script type="text/javascript">
    var json = {"name":"John","location":"Boston"};
    // post请求方式的ajax
    $(function () {
        $("#sendAjax").click(function () {
            $.post("ajax.do",json,function (msg){
                var str = msg.name + msg.location;
                $("#showInfo").text(str);
            });
        });
    });
</script>

3. JSON 入门

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。

JSON 建构于两种结构：

这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

JSON具有以下这些形式：

对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。


图片.png

数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

图片.png

值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。

图片.png

JSON 工具

市面有很多的 JSON 转化工具，转化(JAVA 对象转换成 Json 格式的字符串，叫序列化；Json 格式的 字符串 转换成 Java 对象，叫反序列化)，
有 jackjson 工具、gson工具、fastjson工具(alibaba 温绍开发的)、json-lib 工具.......

上一篇下一篇

猜你喜欢

热点阅读