五、Ajax 入门

作者: cqzhangjian | 来源:发表于2017-12-22 10:26 被阅读0次

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

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

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

注册监听器监听 XMLHttpRequest 状态，使用 XMLHttpRequest 对象中的 onreadystatechange 事件

hrx.onreadystatechange = function () {
                if(hrx.readyState == 4 && hrx.status == 200) {
                    document.getElementById("showInfo").innerHTML = hrx.responseText;
                }
            }

设置 ajax 连接信息,通过调用 XMLHttpRequest 中的open 方法

hrx.open("get","ajax.do",true);

发送 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 核心对象详解

XMLHttpRequest 核心对象中的属性
readyState 属性：
类型：返回的数据类型是 short 类型
作用：表示XMLHttpRequest对象的当前状态
具体含义:
0：代表的XMLHttpRequest对象刚刚创建，但是还未初始化
1:open方法已经被调用了
2:send方法已经被调用了
3:接受到了响应消息头，但是没有接受到正文
4:接受到了响应正文，响应结束
status 属性：
类型：返回的数据类型 short
作用：响应的状态码
具体含义：200 成功响应,404 找不资源......
statusText 属性：
类型：返回的类型是String
作用：对响应码的描述
responseText属性：
类型：返回的类型是 string
作用：接受服务器返回的文本类型的正文数据
responseXML属性：
类型:返回的是docment对象(js中的文档模型)
作用:接受服务器返回的XML类型的正文数据
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"）;

XMLHttpRequest 核心对象中的事件 onreadystatechange
作用：指向一个函数，用于做事件处理的，XMLHttpRequest对象的readyState的每次发生变化都会触发onreadystatechange指向的那个函数处理器。
这个函数就是我们自己去编写

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 建构于两种结构：

“名称/值”对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组（associative array）。
值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。

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

JSON具有以下这些形式：

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

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

图片.png

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

图片.png

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

图片.png

JSON 工具

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

jackjson 工具
先导包：
jackson-annotations-2.8.10.jar
jackson-core-2.8.10.jar
jackson-databind-2.8.10.jar
序列化：ObjectMapper mapper = new ObjectMapper();
JAVABEAN:String json = mapper.writeValueAsString(u);
List、set:String json = mapper.writeValueAsString(users);
Map:String json = mapper.writeValueAsString(map);
反序列化：
javabean:mapper.readValue(json, UserModel.class);
map:mapper.readValue(json, UserModel.class);
list、set:mapper.readValue(json, new TypeReference<List<UserModel>>() {});

fastjson 工具
先导包: fastjson-1.2.31.jar
序列化： JSON.toJSONString（javabean对象或者list set....），该方法在转化日期的时候，使用的是时间戳类型进行转化。
JSON.toJSONStringWithDateFormat(u, "yyyy-MM-dd"); 该日期格式的序列化方法
JAVABEAN: {"age":18,"birth":1514182514315,"flag":true,"name":"test","password":"pass1111"}
List、set:[{"age":18,"birth":1514182663609,"flag":true,"name":"test","password":"pass1111"},{"age":18,"birth":1514182663609,"flag":true,"name":"test","password":"pass1111"}]
Map:
{
"k1": {
"age": 18,
"birth": 1514182824812,
"flag": true,
"name": "test",
"password": "pass1111"
},
"k2": {
"age": 18,
"birth": 1514182824812,
"flag": true,
"name": "test",
"password": "pass1111"
}
}
注意：map 就是一个 javabean
反序列化：JSON.parseObject(json, UserModel.class)
JAVEAN:JSON.parseObject(json, UserModel.class)
LIST、SET：JSON.parseArray(json, UserModel.class);
MAP:JSON.parseObject(json, UserModel.class)

五、Ajax 入门

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

1.1 XMLHttpRequest 核心对象详解

2.使用 Jquery 封装好的Ajax

2.1.$.ajax()

2.2.$.get()

2.3.$.post()

3. JSON 入门

JSON 工具

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读