Web04 Ajax

Posted FremontUltimate

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web04 Ajax相关的知识,希望对你有一定的参考价值。

Web04 Ajax

1.JSON

轻量级的数据交换格式

客户端和服务器之间业务数据的传递格式

1.1 javascript使用

  • json 是由键值对组成

  • 花括号(大括号)包围

  • 每个键由引号引起来

  • 键和值之间使用冒号进行分隔,

  • 多组键值对之间进行逗号进行分隔

var jsonObj = {
   "key1":21,
   "key2":"sss"
};

json 本身是一个对象

通过key访问值:json 对象.key

  • 操作 json 中的数据的时候,需要 json 对象的格式 JSON.parse() 把 json 字符串转换成为 json 对象

  • 数据交换的时候,使用 json 字符串 JSON.stringify() 把 json 对象转换成为 json 字符串

1.2 Java使用

javaBean 和 json 的互转:

// 创建 Gson 对象实例 
Gson gson = new Gson();
//javabean对象
Person person = new Person();
// toJson 方法可以把 java 对象转换成为 json 字符串
String personJsonString = gson.toJson(person);
/*
fromJson 把 json 字符串转换回 Java 对象
第一个参数是 json 字符串
第二个参数是转换回去的 Java 对象类型
*/
Person person1 = gson.fromJson(personJsonString, Person.class);

List 和 json 的互转:

List<Person> personList = new ArrayList<>();
Gson gson = new Gson();
// 把 List 转换为 json 字符串
String personListJsonString = gson.toJson(personList);
List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());
/*
其中 PersonListType 类如下
只需继承,其他的不用写
*/
class PersonListType extends TypeToken<ArrayList<Person>>{}

map 和 json 的互转:

Map<Integer,Person> personMap = new HashMap<>();
Gson gson = new Gson();
// 把 map 集合转换成为 json 字符串
String personMapJsonString = gson.toJson(personMap);
Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType());
/*
可直接使用 TypeToken 匿名内部类
*/

2.Ajax

异步 JavaScript 和 XML

创建交互式网页应用的网页开发技术

ajax 是一种浏览器通过 js 异步发起请求,局部更新页面的技术,浏览器地址栏不会发生变化

2.1 原生Ajax请求

<script type="text/javascript">
   // 在这里使用 javaScript 语言发起 Ajax 请求,访问服务器 AjaxServlet 中 javaScriptAjax
   function ajaxRequest(){
   var xmlhttprequest = new XMLHttpRequest();
   //调用 open 方法设置请求参数
   xmlhttprequest.open("GET","http://localhost:8080/ajaxServlet?action=javaScriptAjax",true);
   //在 send 方法前绑定 onreadystatechange 事件,处理请求完成后的操作
   xmlhttprequest.onreadystatechange = function(){
       if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
           var jsonObj = JSON.parse(xmlhttprequest.responseText);
           // 把响应的数据显示在页面上
           document.getElementById("div01").innerhtml = "编号:" + jsonObj.id + " , 姓名:" + jsonObj.name;
      }
  }
   //调用 send 方法发送请求
   xmlhttprequest.send();  
}

 

2.2 jQuery AJAX 请求

$.ajax 方法

  • url 表示请求的地址

  • type 表示请求的类型 : GET 或 POST 请求

  • data 表示发送给服务器的数据 格式有两种:

    • name=value&name=value

    • {key:value} 键值对

  • success 请求成功,响应的回调函数

  • dataType 响应的数据类型:

    • text 表示纯文本

    • xml 表示 xml 数据

    • json 表示 json 对象

$.ajax({ 
   url:"http://localhost:8080/ajaxServlet",
   data:{action:"jQueryAjax"},
   type:"GET",
   success:function (data) {
       $("#msg").html("编号:" + data.id + " , 姓名:" + data.name);
  },
   dataType : "json"
});

$.get 方法和$.post 方法 :

  • url 请求的 url 地址

  • data 发送的数据

  • callback 成功的回调函数

  • type 返回的数据类型

$.get(
   "http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
   "action=jQueryGet",
   function (data) {
       $("#msg").html(" get 编号:" + data.id + " , 姓名:" + data.name); },
   "json"
);

$.getJSON 方法 :

  • url 请求的 url 地址

  • data 发送的数据

  • callback 成功的回调函数

表单序列化 serialize() :

把表单中所有表单项的内容都获取并拼接为 name=value&name=value 的形式

$.getJSON(
   "http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
   "action=jQuerySerialize&" + $("#form01").serialize(),
   function (data) {
       $("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name);
  }
);

 

以上是关于Web04 Ajax的主要内容,如果未能解决你的问题,请参考以下文章

Ajax 片段元标记 - Googlebot 未读取页面内容

html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

AJAX相关JS代码片段和部分浏览器模型

Web04 Ajax

Javascript代码片段在drupal中不起作用

使用 Jquery 的同步“Ajax”调用似乎不起作用