Web基础了解版11-Ajax-JSON

Ajax

AJAX即“Asynchronous Javascript And XML”:是,不发生页面跳转、异步请求载入内容并改写局部页面内容的技术。

也可以简单的理解为通过JS向服务器发送请求。

 同步处理

就是当我们通过一个页面向服务器发送一个请求时,在服务器响应结束之前,我们的整个页面是不能操作的,并且即使整个页面中只有一小部分内容发生改变我们也要刷新整个页面。

异步处理

通过AJAX向服务器发送请求,当服务器正常响应请求后,响应信息会直接发送到AJAX中,AJAX可以根据服务器响应的内容做一些操作。并可局部的修改页面,而不需要整个页面刷新。

请求对象:XMLHttpRequest

  • XMLHttpRequest对象用来封装请求报文,我们向服务器发送的请求信息全部都需要封装到该对象中。

获取XMLHttpRequest对象,不同浏览器之间有差异

//获取XMLHttpRequest的通用方法
function getXMLHttpRequest(){
    var xhr;
    try{
        //大部分浏览器都支持
        xhr = new XMLHttpRequest();
    }catch(e){
        try{
            //如果不支持,在这里捕获异常并且采用IE6支持的方式
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            //如果还不支持,在这里捕获异常并采用IE5支持的方式
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xhr;
}

XMLHttpRequest对象的方法

  • open(method,url,async):用于设置请求的基本信息,接收三个参数。

    • 参数一:method

      接收一个字符串,表明请求的方法:get或post

    • 参数二:url

      请求的地址,接收一个字符串

    • 参数三:Assync

      发送的请求是否为异步请求,接收一个布尔值。① true 是异步请求 ② false 不是异步请求(同步请求)

  • send(string):用于将请求发送给服务器,可以接收一个参数
    • string参数

      该参数只在发送post请求时需要。用于设置请求体

  • setRequestHeader(header,value):用于设置请求头
    • 参数一:header参数

      字符串类型,要设置的请求头的名字

    • 参数二:value参数

      字符串类型,要设置的请求头的值

XMLHttpRequest对象的属性

  • readyState

    • 描述XMLHttpRequest的状态
    • 一共有五种状态分别对应了五个数字:
      • 0 :请求尚未初始化,open()尚未被调用
      • 1 :服务器连接已建立,send()尚未被调用
      • 2 :请求已接收,服务器尚未响应
      • 3 :请求已处理,正在接收服务器发送的响应
      • 4 :请求已处理完毕,且响应已就绪。
  • status
    • 请求的响应码

      • 200 响应成功
      • 404 页面为找到
      • 500 服务器内部错误

        ......

  • onreadystatechange
    • 该属性需要指向一个函数
    • 该函数会在readyState属性发生改变时被调用
  • responseText
    • 获得字符串形式的响应数据。
  • responseXML(用的比较少)
    • 获得 XML 形式的响应数据。

JQuery的Ajax请求

四个Ajax请求方法

  • $.ajax方法
  • $.get方法
  • $.post方法
  • $.getJSON方法

一个表单序列化方法:serialize()表单序列化方法

$.ajax请求

  • url: 请求的地址
  • type : 请求的方式 get或post
  • data : 请求的参数 string或json
  • success: 成功的回调函数
  • dataType: 返回的数据类型 常用json或text

$.get和$.post请求

  • url:请求的URL地址
  • data:待发送 Key/value 参数。
  • callback:载入成功时回调函数。
  • type:返回内容格式,xml, html, script, json, text。

$.getJSON请求

  • url:待载入页面的URL地址
  • data:待发送 Key/value 参数。
  • callback:载入成功时回调函数。

表单的序列化

  • serialize() 方法可以把一个form表单中所有的表单项。都以字符串name=value&name=value的形式进行拼接
$.ajax({
    url : "ajaxServlet",     // 请求地址
    error:function(){        // 请求失败回调
        alert("请求失败");
    },
    success:function(data){    // 请求成功回调
        alert( data );
    },
    type:"POST",                // 请求的方式
    dataType:"json",            // 返回的数据类型为json对象
    data:{                      // 请求的参数
         action:"jqueryAjax",
         a:12,
         date: new Date()
     }
 });

JSON

JSON是JavaScript Object Notation 的缩写,是JS提供的一种轻量级的数据交换格式, 易于人阅读和编写。同时也易于机器解析和生成。

JSON对象本质上就是一个JS对象,但是这个对象比较特殊,它可以直接转换为字符串,在不同语言中进行传递,通过工具又可以转换为其他语言中的对象。

在标准的json格式中,json对象由大括号括起来,对象中的属性也就是json的key是一个字符串,所以一定要使用双引号引起来。每组key之间使用逗号进行分隔。

JSON 6种数据类型

  • 字符串           //注意:不能使用单引号
  • 数字
  • 布尔值
  • null值
  • 对象
    • 例子:{“name”:”sunwukong”, ”age”:18}
  • 数组
    • 例子:[1,”str”,true]

JSON对象的访问

key就是对象的属性。我们要访问一个对象的属性,只需要使用【对象名.属性名】的方式访问即可。

JSON对象和字符串对象的互转

  • JSON.stringify( json ):此方法可以把一个json对象转换成为json字符串
  • JSON.parse( jsonString ): 此方法可以把一个json字符串转换成为json对象

JSON在Java中的使用

Gson 提供了用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库,可以将一个 JSON 字符串转成一个 Java 对象,或者反过来。

  • java对象和json的转换
  • java对象list集合和json的转换
  • map对象和json的转换
 // json操作,一定要先new一个gson对象。
Gson gson = new Gson();

// 1、把对象转成为json字符串
String personjson = gson.toJson(person);
// 把json字符串转换成为java对象
Person p = gson.fromJson(personjson, Person.class);    

//2、java对象list集合和json的转换
String jsonListString = gson.toJson(list);
// 把json数组转换成为List对象
List<Person> ps = gson.fromJson(jsonListString, new PersonType().getType());

// 3、map对象和json的转换
String jsonMapString = gson.toJson(mapPerson);
// 通过使用匿名内部类的方式
Map<String, Person> map = gson.fromJson(jsonMapString,new TypeToken<HashMap<String, Person>>() {}.getType());

原文地址:https://www.cnblogs.com/Open-ing/p/12147066.html

时间: 2024-08-30 14:19:38

Web基础了解版11-Ajax-JSON的相关文章

Web基础了解版04-XML-Tomcat

XML 什么是XML-Tomcat XML:eXtensible Markup Language (可扩展标记语言). XML 是一种标记语言,很类似 HTML. XML 的设计宗旨是传输数据,而非显示数据. XML的使命,就是以一个统一的格式,组织有关系的数据.为不同平台下的应用程序服务,独立于软件和硬件的信息传输工具. XML 仅仅是纯文本.有能力处理纯文本的软件都可以处理 XML.不过,能够读懂 XML 的应用程序可以有针对性地处理 XML 的标签. XML相较于HTML,语法更加严格.

Web基础了解版05-Servlet

Servlet Servlet? 从广义上来讲,Servlet规范是Sun公司制定的一套技术标准,包含与Web应用相关的一系列接口,是Web应用实现方式的宏观解决方案.而具体的Servlet容器负责提供标准的实现. 从狭义上来讲,Servlet指的是javax.servlet.Servlet接口及其子接口,也可以指实现了Servlet接口的实现类. Servlet(Server Applet)作为服务器端的一个组件,它的本意是“服务器端的小程序”. Servlet的实例对象由Servlet容器负

Web基础了解版08-JSTL

JSTL JSP为我们提供了可以自定义标签库(Tag Library)的功能,用来替代代码脚本,Sun公司又定义了一套通用的标签库名为JSTL(JSP Standard Tag Library),里面定义很多我们开发中常用的方法 使用JSTL   1.先引入JSTL标签库的jar包类库到WEB-INF/lib目录下 2.使用taglib指令导入需要的标签库 CORE 标签库 <%@ taglib prefix="c" uri="http://java.sun.com/j

Web基础了解版12-上传下载

上传 两个步骤: 用户在页面中选择要上传的文件,然后将请求提交到Servlet Servlet收到请求,解析用户上传的文件,然后将文件存储到服务器 上传文件表单 <form action="Servlet" method="post" enctype="multipart/form-data"> <input type="file" name="file" /><br />

web基础知识(二)关于ajax,Jquery传值最基础东西

这次还是一些关于jQuery,ajax前后台传值情况, 是自己在做点小东西过程中遇到的,记录下来为自己也方便别人 列表很多,点击编辑和删除无刷新的进行操作的话,肯定是ajax了,因为无刷新嘛,可能有的朋友会说直接传值,传ID到Action删除不就OK了,用得着写js么,纯粹自己找麻烦嘛. 其实这里重点是无刷新的啦, 这个上传后到这里来,有个预览功能,把本次的全部预览,如果全部刷新的话,那么刚才上传的就不会在这个页面了,so,还是采用无刷新的比较好. 点击编辑跳到一个新的页面的时候有两种方法可以选

web基础知识(三)关于ajax,Jquery传值最基础东西

今天补充一下两个小功能,一个是关于radio单选框的情况,如何在前面选了后,传到后台,编辑修改的时候再次传回来,并且在当时选的那个上:再一个就是关于添加小标签的时候添加接着弹出在下面,并点击出现删除. 一:radio 1 <div class="newlylist"> 2 <div class="newlyhead">图示商品:</div> 3 <div class="newlycontent">&

web基础知识(一)关于ajax传值最基础东西

HTTP方法之 GET对比POST GET:从指定的资源请求数据, POST:向指定的资源提交要被处理的数据 GET方法: 请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的: /test/demo_form.asp?name1=value1&name2=value2 有关 GET 请求的其他一些注释: GET 请求可被缓存 GET 请求保留在浏览器历史记录中 GET 请求可被收藏为书签 GET 请求不应在处理敏感数据时使用 GET 请求有长度限制 GET 请求只应当用于取回

JFreeChart与AJAX+JSON+ECharts两种处理方式生成热词统计可视化图表

本篇的思想:对HDFS获取的数据进行两种不同的可视化图表处理方式.第一种JFreeChar可视化处理生成图片文件查看.第二种AJAX+JSON+ECharts实现可视化图表,并呈现于浏览器上.   对此,给出代码示例,通过网络爬虫技术,将上传到HDFS的新浪网新闻信息实现热词统计功能,通过图表的柱状图来显示出来. ------> 目录: 1.JFreeChart可视化处理(生成本地图片) [1]HDFS文件读取 [2]JDFreeChart库应用 2.AJAX+JSON+EChart生成可视化图

asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs" Inherits="renmai_PageTest" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh