Ajax与jQuery的使用

5/3/2018 8:30:28 AM

---

晨测

1. JSP内置对象和作用？
2. JSP四大域对象和其范围。

回顾

今日概述

一、Ajax
二、JSON数据格式
三、Ajax+Jquery
四、分页的实现

一、Ajax概述

<1>概述

<2>组成

以XMLHttpRequest为核心，发送Ajax请求和接收处理结果
以javascript为语言基础
以XML/JSON作为数据的传输格式
以HTML和CSS作为页面的渲染

<3>作用

局部刷新
异步请求

<4>作用流程

<5>实现步骤和核心的API

1. 创建XMLHttpRequest对象(浏览器的兼容性)
2. 调用open方法，创建一个ajax请求
3. 设定回调函数
    onreadystatechange = 函数
    5. 接收处理结果（判断请求和响应处理的状态）
        responseText
        responseXML
4. 调用send方法发送ajax请求

XMLHttpRequest:ajax引擎
open()：创建Ajax请求
    注意get：可以得到缓存中的数据
         在URL后面添加唯一的标识
         open("GET","TimeServlet?id="+new Date(),true);

    注意post:添加HTTP HEAD 
         xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

send()：发送Ajax请求
    post请求时发送请求数据：k=v&k1=v2&...
    get请求时直接调用无参send()方法

onreadystatechange：绑定Ajax请求的回调函数
    readyState属性值发生变化时，回调指定的回调函数

readyState ：Ajax请求处理的状态
    请求未初始化 ： readystate = 0
    请求正在发送 ： readystate = 1
    发送完毕 ： readystate = 2
    响应中 ： readystate =  3
    响应完成     ： readystate = 4   

status ：服务器处理后HTTP CODE 状态码。
    status=200 响应完成
    status=404 资源找不到
    status=500 服务器端发生错误

responseText ：封装了服务器处理的字符串结果数据
responseXML ：封装了服务器处理的XML结果数据
    服务器响应的数据类型
    String(JSON)
    XML  

二、JSON数据格式

<1>概念

和语言没有关系的一种数据交换格式

实现前端和后台的数据交互

<2>语法格式

对象：｛｝
对象数组：[{},{},{}] 
属性和内容：key:value , key2:value2 ,...

<3>解析json数据

在js中直接可以处理json对象 

<4>json转换

客户端 :处理json对象,可以直接操作
    将json字符串转换成json对象
        var jsonObj = JSON.parse(jsonStr) 
        var jsonObj = eval( "("+    jsonStr    +")");

服务器 ：
    1.json对象转换成json字符串
        借助第三方的工具包
        JSONObject :将一个java对象转换成JSON对象，从JSON中获取json字符串
            JSONObject  obj = JSONObject.fromObject(java对象);
            String str = obj.toString();

        JSONArray  :将一个java数组对象转换成JSON数组对象，从JSON数组对象中获取json字符串
            JSONArray  objArr = JSONArray.fromObject(java数组对象);
            String str = objArr.toString();

    2.json字符串转换成java对象
        借助第三方的工具包

三、Jquery+Ajax

<1>Jquery概念

对JS进行封装，简化代码量，js的框架
write less do more

<2>使用步骤

1. 下载jquery.js脚本文件,添加到web项目（jquery.js / mini-jquery.js）
2. 在需要使用jquery的页面中，使用<script src=“url”></script>
3. 使用jquery进行各种操作

<3>实践：登陆异步用户名校验

方式一：$.get(列数列表)

    参数列表：url,[data],[callback],[type]
        url:待载入页面的URL地址
        data:待发送 Key/value 参数。
        callback:载入成功时回调函数。
        type:返回内容格式，xml, html, script, json, text, _default。

方式二：$.post(列数列表)

    参数列表：url,[data],[callback],[type]
        url:待载入页面的URL地址
        data:待发送 Key/value 参数。
        callback:载入成功时回调函数。
        type:返回内容格式，xml, html, script, json, text, _default。

方式三：$.ajax(列数列表)

    参数列表：
    ｛
        async:是否异步，true
        data:待发送 Key/value 参数。
        dataType:指定服务器返回的响应数据的类型。
        type:请求的方式。
        success： 响应成功后要执行的代码块，成功的回调函数
        error: 响应失败的错误页面的回调函数
        url：请求服务器的地址
    ｝


    例如：
        $.ajax(
        {   async:true,  
            data:"username="+obj.value,
            dataType:"json",
            success:function(data){
                if(data.result==1){
                    document.getElementById("span").innerHTML = "用户名可以使用";
                }else{
                    document.getElementById("span").innerHTML = "用户名以存在";
                }
            },
            type:"POST",
            url:"CheckUsername",
            error:function(){
                alert("错误");
            }
        }
    );   

四、分页

作业

1. 使用javaee三层架构+MVC实现 异步用户信息验证（先验证数据格式）（重要）
   高亮显示响应结果

2. 注册微信开发者平台账号，开发文档（建议）

3. 写两个按钮（页码1,2）（扩展）
    点击按钮，触发ajax请求，获取指定页码的数据，
    在ajax回调函数中去刷新数据，删除源数据，拼接标签的方式添加新数据

    <div>
        商品1   商品2   商品3

    </div>
        第一页  第二页