色欲久久久天天天综合网精品,97久久精品人人做人人爽,五月色婷婷一区二区三区凹凸视频

Ajax

概念

什么是Ajax?
Asynchronous JavaScript and XML ，異步的JS和XML.異步的客戶端和服務器交互技術
Ajax是js提供的,代碼是js代碼,需要寫在Script標簽體里
Ajax在客戶端和服務器進行交互的時候，數據默認是使用XML格式傳輸的--已經被json取代了
作用
- 局部刷新
- 異步加載
異步與同步的概念
同步: 客戶端發起請求,然后客戶端處于服務器的等待狀態,這個狀態下,客戶端不能進行其他操作.類似于"假死"狀態.
異步: 客戶端發起請求，然后客戶端可以自由進行其他操作，不會處于“假死”狀態；一旦服務器響應完成，可以繼續后續操作

JS 的 Ajax

步驟

創建一個Ajax引擎對象
給Ajax引擎對象綁定事件,監聽Ajax引擎的狀態變化.一旦監聽到接受服務器響應完成,要執行響應行為
設置請求的參數數據
發送請求

js 的 get方法-異步

function ajaxGet() {
        //創建一個Ajax引擎對象
        var xmlHttp = new XMLHttpRequest();
        //2.給Ajav引擎對象綁定事件,監聽Ajax的引擎狀態變化,一旦監聽到接收服務器響應完成,要執行響應行為
        xmlHttp.onreadystatechange = function (ev) {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    document.getElementById("tip").innerText = xmlHttp.responseText;
                }
            }
        }
        //3.這是請求的參數數據,open()方法:請求方式,請求地址,是否異步(默認true,異步)
        //get方法傳參
        xmlHttp.open("get", "/ajax/ajaxServlet?username=tom", true);
        //4. 發送請求
        xmlHttp.send();

js的post方法-異步

    function ajaxPost() {
        //1. 創建一個Ajax引擎對象
        var xmlhttp = new XMLHttpRequest();
        // 2. 給Ajax引擎對象綁定事件,監聽Ajax引擎的狀態變化.一旦監聽到接受服務器響應完成,要執行響應行為
        xmlhttp.onreadystatechange = function (ev) {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    document.getElementById("tip").innerHTML = xmlhttp.responseText;
                }
            }
        }
        // 3. 設置請求的參數數據:請求方式,請求地址,是否異步(//不寫true,默認是異步的)
        xmlhttp.open("post", "ajaxServlet", true);
        // 4. 發送請求
        xmlhttp.setRequestHeader("Content-type","application/x-www/form-urlencode")
        xmlhttp.send("username=tom");
    }

js的post和get方法-同步模式

只需要將 xmlhttp.open(method,url,async)中的aync參數該為false即可

請求參數的格式

格式一："username=tom&password=123"
格式二：{username:"tom",password:"123"}

關于路徑

在HTML里寫路徑的時候,建議使用相對路徑.好處是不需要關注context path.
在jsp或者Servlet里面,寫絕對路徑 ./資源路徑 或者 /contextpath/資源路徑
當前頁面的資源路徑：/jsajax.html
請求的目標資源路徑：/ajaxServlet
在當前頁面里請求/ajaxServlet，路徑就可以寫成：./ajaxServlet，簡寫成：ajaxServlet

jQuery 的 Ajax

原生的 JavaScript 提供的 Ajax，重復代碼比較多，而且存在瀏覽器兼容問題。jQuery 對 js 的 Ajax 做了二次封裝，封裝后提供了一些方法。這些方法一樣可以實現 Ajax 的效果，但是比原生 js 的 Ajax 更為簡單，并且解決了瀏覽器兼容性問題.

Post方法 (最常用)

語法: jQuery.post(url,[params],[callback],[responseType])
參數: url 請求的地址,必須
     params 請求的參數
        格式1: username=tom&password=123
        格式2:  {username:"tom",password:"123"}
     callback 當Jquery監聽到服務端響應完成之后,調用的函數對象
        function(result){
            //result:服務器響應回來的數據
        }
    responseType 服務端響應回來的數據類型。text/json

//var params = "username=tom";
        var params = {username:"tom"};
        $.post("ajaxServlet", params, function (result) {
            alert(result);
        })

Get方法

語法: jQuery.get(url,[params],[callback],[responseType])
參數: url 請求的地址,必須
     params 請求的參數
        格式1: username=tom&password=123
        格式2:  {username:"tom",password:"123"}
     callback 當Jquery監聽到服務端響應完成之后,調用的函數對象
        function(result){
            //result:服務器響應回來的數據
        }
    responseType 服務端響應回來的數據類型。text/json

 var params = {username:"tom"}
        $.get("/ajax/ajaxServlet",params,function (result) {
            alert(result);
        })

注意: get/post方法,只能發異步的. 如果要發送同步的請求,需要使用ajax方法

Ajax方法

語法：$.ajax({settings});
參數：是以{}的對象形式，里邊是鍵值對的方式配置相關的數據。有非常多的配置項，常用的有：
      url：請求的地址。必須
      data：請求參數。格式一："username=tom&password=123"。 格式：{username:"tom",password:"123"}
      type：請求方式。get/post
      dataType：服務端響應回來的數據類型。text/json
      success：jQuery 監聽到服務端響應完成后，調用的函數對象。
         function(result){
             //result：服務端響應回來的數據
         }
      async：是否異步。true/false

$.ajax({
    url: "/ajax/ajaxServlet",  // 請求地址,必填
    data: "username=tom", //請求參數
    type: "post", //請求方式
    dataType: "text", //服務器返回的參數類型
    success: function (result) { //監聽到服務器響應完成后,調用函數對象
        alert(result);
    },
    async: true  //是否異步,默認true
});

jQuery3.0 的Ajax新增簽名方式

待補充...下回分解....

JSON

概念

JavaS Object Notation JS對象標記法. 是一種輕量級數據格式,代替xml

定義和解析JSON

定義：
- 對象形式定義：var json = {"key":value, "key":value}
- 數組形式定義：var arr = [obj1, obj2];
- 兩種混合定義：var arr = {"key":obj, "key":{}, "key":[]}
解析： var v = json.key; var v = json[i].key

Demo

var json = {key:value,key:value}

/*class Person{
   String name = "三豐";    
   Integer age = 100; 
}*/
var p = {"name":"三豐","age":100};
var name = p.name;
var age = p.age;

var arr = [object1,object2]

//[{key:value,key:value},{key:value,key:value}]
var json = [
    {"name":"張三","age":17},
    {"name":"李四","age":18}
];
var name1 = json[0].name;
var name2 = json[1].name;
var age1 = json[0].age;
var age2 = json[1].age;

var arr = {"key":"obj","key":{},"key":[]}

//1. {"param":[{key:value,key:value},{key:value,key:value}]
var json = {
    "department" :[
        {"name":"coco","age":17},
        {"name":"joy","age":18},
        {"name":"ceci","age":19}
    ]
};
var name = json.department[2].name;

/**
 * 2. 
 * {
 *   "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}]
 * }
 */
var json = {
    "department1": [
        {"name": "coco", "age": 17},
        {"name": "joy", "age": 18},
        {"name": "ceci", "age": 19}
    ],
    "department2": [
        {"name": "coco", "age": 17},
        {"name": "joy", "age": 18},
        {"name": "ceci", "age": 19}
    ]
}
var age = json.department2[1].age;
alert(age);

/**
 * 3
 * {
 *   "param1":"value1",
 *   "param2":{},
 *   "param3":[{key:value,key:value},{key:value,key:value}]
 * }
 */

var json = {
    "school": "University",
    "info": {"schoolName": "ShenZhen-University", "address": "ShenZhen"},
    "student": [
        {"name": "coco", "age": 17},
        {"name": "joy", "age": 18},
        {"name": "ceci", "age": 19}
    ]
}
var schoolName = json.info.schoolName;
var name = json.student[0].name;
alert(schoolName);
alert(name);

JSON轉換工具

服務端經常要把 JavaBean 或者是 JavaBean 的集合轉換成 json，返回響應給客戶端，可以使用工具包來完成這個轉換的工作。

常見的有：

jsonlib：sun 公司的，依賴的 jar 包過多
gson：google 的工具包
fastjson：alibaba 的工具包
jackson：springMvc 默認使用的轉換工具包

jsonlib

package json;

import domain.User;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

public class JsonLib_01 {
    public static void main(String[] args) {
        User user1 = new User("coco","123");
        User user2 = new User("xingxing","123");

        ArrayList<User> userList = new ArrayList();

        userList.add(user1);
        userList.add(user2);

        Map<String,User> map = new HashMap<>();
        map.put("user1",user1);
        map.put("user2",user2);
        
        //把user1轉換為json格式
        JSONObject jsonObject = JSONObject.fromObject(user1);
        String json = jsonObject.toString();
        System.out.println(json);

        //把list轉換為json格式
        JSONArray jsonArray = JSONArray.fromObject(userList);
        json = jsonArray.toString();
        System.out.println(json);

        //把map轉換為json格式
        JSONObject jsonObject1 = JSONObject.fromObject(map);
        json = jsonObject1.toString();
        System.out.println(json);
    }
}

gson

package json;

import com.google.gson.Gson;
import domain.User;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

public class Gson_02 {
    public static void main(String[] args) {
        User user1 = new User("coco", "123");
        User user2 = new User("xingxing", "123");

        ArrayList<User> userList = new ArrayList();
        userList.add(user1);
        userList.add(user2);

        Map<String, User> map = new HashMap<>();
        map.put("user1", user1);
        map.put("user2", user2);

        //把user轉換為Json格式
        Gson gson = new Gson();
        String json = gson.toJson(user1);
        System.out.println(json);

        //把userList轉換為Json格式
        json = gson.toJson(userList);
        System.out.println(json);

        //把map轉換為Json格式
        json = gson.toJson(map);
        System.out.println(json);
    }
}

fastjson

package json;

import com.alibaba.fastjson.JSONObject;
import domain.User;


import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

public class FastJson_03 {
    public static void main(String[] args) {
        User user1 = new User("coco", "123");
        User user2 = new User("xingxing", "123");

        ArrayList<User> userList = new ArrayList();

        userList.add(user1);
        userList.add(user2);

        Map<String, User> map = new HashMap<>();
        map.put("user1", user1);
        map.put("user2", user2);

        //把user轉換為Json格式
        String json = JSONObject.toJSONString(user1);
        System.out.println(json);

        //把userList轉換為Json格式
        json = JSONObject.toJSONString(userList);
        System.out.println(json);

        //把map轉換為Json格式
        json = JSONObject.toJSONString(map);
        System.out.println(json);
    }
}

jackson

package json;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import domain.User;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

public class Jackson {
    public static void main(String[] args) throws JsonProcessingException {

        User user1 = new User("coco", "123");
        User user2 = new User("xingxing", "123");

        ArrayList<User> userList = new ArrayList();

        userList.add(user1);
        userList.add(user2);

        Map<String, User> map = new HashMap<>();
        map.put("user1", user1);
        map.put("user2", user2);

        ObjectMapper mapper = new ObjectMapper();
        
        //把user轉換為Json格式
        String json = mapper.writeValueAsString(user1);
        System.out.println(json);
        
        //把userList轉換為Json格式
        json = mapper.writeValueAsString(userList);
        System.out.println(json);
        
        //把map轉換為Json格式
        json = mapper.writeValueAsString(userList);
        System.out.println(json);
    }
}

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Ajax & JSON

Ajax & JSON

Ajax

概念

JS 的 Ajax

步驟

js 的 get方法-異步

js的post方法-異步

js的post和get方法-同步模式

請求參數的格式

關于路徑

jQuery 的 Ajax

Post方法 (最常用)

Get方法

Ajax方法

jQuery3.0 的Ajax新增簽名方式

JSON

概念

定義和解析JSON

JSON轉換工具

jsonlib

gson

fastjson

jackson

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Ajax & JSON

Ajax

概念

JS 的 Ajax

步驟

js 的 get方法-異步

js的post方法-異步

js的post和get方法-同步模式

請求參數的格式

關于路徑

jQuery 的 Ajax

Post方法 (最常用)

Get方法

Ajax方法

jQuery3.0 的Ajax新增簽名方式

JSON

概念

定義和解析JSON

JSON轉換工具

jsonlib

gson

fastjson

jackson

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频