JavaWeb学习之Ajax

Ajax技术

1、同步与异步

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待、卡死的状态。

异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会卡死。

2、Ajax运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以进行任意操作，知道服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面的功能。

js原生的Ajax技术

js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有以下几个步骤：

1）创建Ajax引擎对象

2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）

3）绑定提交地址

4）发送请求

5）接收响应数据

如果是Post方式提交，需要在发送请求之前设置一个头

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

注：所有的异步访问都是Ajax引擎

Json数据格式

json是一种与语言无关的数据交换格式。作用就是：使用Ajax进行前后台的数据交换、移动端与服务端的数据交换

Json的格式与解析

1）对象格式：{“key1”:obj,"key2":obj,"key3":obj....}

2）数组/集合格式：[obj,obj,obj...]

例如：user对象，用Json数据格式表示为：{“username”：“zhangsan”,"age":18,"address":"淄博"}

List<Product>，用Json数据格式表示为：[{"pid":10,"pname":"小米4C"},{},{}...]

注：1、对象格式和数组格式可以互相嵌套的

2、json的key是字符串，json的value是object

json的解析：json是js的原生内容，也就意味着js可以直接取出json对象中的数据

class Person{
      String firstname = "张";
      String lastname = "三丰";
      Integer age = 100;
     }
       案例一
       {key:value,key:value}
       {"firstname":"张","lastname":"三丰","age":100}
      案例二
       [{key:value,key:value},{key:value,key:value}]
       [{"firstname":"李","lastname":"四","age":18},{},{}]
       案例三
      {
        "param":[{key:value,key:value},{key:value,key:value}]
      }
        "java0131":[{"firstname":"李","lastname":"四","age":18},{},{}]
       案例四
      {
         "param1":[{key:value,key:value},{key:value,key:value}],
         "param2":[{key:value,key:value},{key:value,key:value}],
         "param3":[{key:value,key:value},{key:value,key:value}]
       }
       案例五
       {
         "param1":"value1",
         "param2":{},
         "param3":[{key:value,key:value},{key:value,key:value}]
        }

package web;
 
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class JqueryAjax extends HttpServlet {
 
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // post方式提交的时候，request获取的数据不会有中文乱码的问题
        // get方式提交的时候，request获取的数据会有中文乱码的问题
        // name = new String(name.getBytes("ISO8859-1"), "UTF-8");
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        System.out.println(name + "..." + age);
        // java只能返回一个Json格式的字符串
        //response中文乱码该怎么解决还怎么解决
        response.getWriter().write("{\"name\":\"" + name + "\",\"age\":" + age + "}");
    }
 
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

Json转换插件

将java的对象或集合转成json形式字符串

json的转换插件是通过java的一些工具，直接将java对象或集合转换成json字符串。

常用的json转换工具有如下几种：

1）jsonlib

2）Gson：google

3）fastjson：阿里巴巴

Jquery的Ajax技术

Jquery是一个优秀的js框架，自然对js原生的Ajax进行了封装，封装后的Ajax在操作方法上更简洁，功能更强大，与Ajax操作相关的jQuery方法有如下几种，但是开发中经常使用的有三种

1、$.get(url,[data],[callback],[type])

2、$.post(url,[data],[callback],[type])

url:代表的请求的服务器端的地址

data:代表的请求服务器端的数据（可以是key=value形式，也可以是json格式）

callback:代表的服务器端成功响应所触发的函数（只有正常成功返回才执行）

type:表示服务器端返回的数据类型（jQuery会根据指定的类型自动转换），常用的返回类型：text、json、html等

3、$.ajax({option1:value1,option2:value2......});

常用的option如下：

async:是否异步，默认是true代表异步

data:发送到服务器的参数，建议使用json格式

dataType:服务器端返回的数据类型，常用的text和json

success:成功响应执行的函数，对应的类型是function类型

type:请求方式，POST/GET

url:请求服务器端的地址

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    function fn() {
        $.get(
        //url地址
        "/web13/JqueryAjax",
        //data数据
        {
            "name" : "小红",
            "age" : 18
        },
        //回调函数
        function(data) {
            alert(data.name)
        },
        //数据格式
        "json"
 
        );
    }
    function fn1() {
        $.get(
        //url地址
        "/web13/JqueryAjax",
        //data数据
        {
            "name" : "小红",
            "age" : 18
        },
        //回调函数
        function(data) {
            alert(data.name)
        },
        //数据格式
        "json"
 
        );
    }
    function fn2() {
        $.ajax({
            url : "/web13/JqueryAjax",
            async : true,
            type : "post",
            data : {
                "name" : "小红",
                "age" : 18
            },
            success : function(data) {
                alert(data.name);
            },
            error : function() {
                alert("请求无效");
            },
            dataType : "json"
        });
    }
</script>
</head>
<body>
    <input type="button" value="GET方式异步请求服务器" onclick="fn()">
    <input type="button" value="POST方式同步请求服务器" onclick="fn1()">
    <input type="button" value="ajax请求服务器" onclick="fn2()">
 
</body>
</html>

javascript   jquery 用法
jquery需要引入一个js文件 并且这个js文件是在所有js代码之前
 
 
找标签：
    js：  document.getElement...   dom对象
        document.getElementById("name");
    jquery: $(选择器)               jquery对象
        $("#name");
jquery对象和js对象转换
    jquery=》js   
    $('.ddd')  => $('.ddd').get(0) || $('.ddd')[0]
    js=》jquery   var dom = document.getElementById('ddd')
    $(dom)
操作内容
    js:   dom代表js对象  dom=document.getElementById("name");
        表单  ：dom.value 
        非表单：dom.innerHTML
    jquery： $ 代表jquery对象  $=$("name");
        表单： $.val();   $.val('修改之后的值');
        非表单： $.html();   $.html('修改之后的值');   $.text();
操作属性；
    js：
        dom.setAttribute(属性名，属性值);
        dom.getAttribute(属性名);
    jquery
        $.attr(属性名,属性值);
        $.attr(属性名);
        $.attr({属性名:属性值 , 属性名:属性值 });
操作样式
    js：
        dom.style.样式 
    jquery:
        $.css(属性名,属性值);
        $.css(属性名);
事件：
    js：  dom.addListeneradfalsdujfaskdjf
        dom.onclick=function(){
         
        }
    jquery:
        $.click(function(){
         
        })