Ajax的三种数据传输格式

2021-06-06 22:04

阅读:326

YPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

标签:不刷新   element   lang   ext   方便   import   基本   获取   on()   

首先说一下什么是Ajax

  Ajax的全称是Asynchronous JavaScript and XML(是异步的 javascript 和 XML),

  通过后台少量的数据交换实现不刷新网页从而进行网页动态的技术,ajax就可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

  Ajax能传输的数据格式一共有三种,HTML格式,XML格式,JSON格式

一,HTML格式

  使用HTML传输格式,最大特点是要使用DOM方法,获取结点,通过结点进行操作使用innerHTML进行对DOM标签的值写入,从而实现异步更新

  首先放HTML代码,下面的文件是从这一段代码来获取数据的

1 h2>a >Andya>h2>
2 a>aaaaaaa>

  然后放JSP代码,

  首先要获取到对象的onlick方法,并且retuen fales这样做的目的是为了废除让a标签的跳转方法

  然后按一下几个步骤执行

  1.创建一个XMLHttpRequest对象

  2.准备发送的数据,一般准备两个一个URL一个Method

  3.调用XMLHttpRequest对象的Open方法,和Send方法,为了方便记忆,这里为了方便理解我所认为就是Open就是准备阶段,send就是发送。

  4.调用XMLHttpRequest对象的onreadystatechange()方法,这个方法会和数据或者服务器进行交互,并且这个过程会有4部,只有当XMLHttpRequest对象的readyState为4的时候表示交互完成

  5.调用XMLHttpRequest对象的status方法,这个对象代表的网页状态比如404(找不到网页) ,500(服务器内部错误),200(成功),

  6操作DOM对标签的值进行写入XMLHttpRequest对象的responseText就是返回的文本

 1 import="java.util.*" pageEncoding="UTF-8"%>
 2  3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 
 8 
 910     11     Ajax HTML格式传输12     41   
42   
43   
44       andy
45       
46 47

 

 

二,XML格式

  我认为,XML操作比HTML操作更为复杂,比上面就多了一个XML解析而已。

  同上首先先放XML代码

1 xml version="1.0" encoding="UTF-8"?>
2 detalis>
3      name>Andyname>
4      text>hahahahahaahtext>
5 detalis>

 

  然后放JSP代码

  过程基本相同,只不过HTML传输格式传输使用responseText,而这里通过responseXML来获取XML文档,然后解析或者子节点的值在对DOM进行操作。

 1 import="java.util.*" pageEncoding="UTF-8"%>
 2  3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 
 8 
 9   10     11     Ajax XML格式传输12     57   
58   
59   
60       andy
61       
62 63

三,json格式

  先说什么是JSON,json是javascript原生的,一种轻量级用户数据交换的一个东西,

  json中只能通过键值对的方式来存储数据,在js中使用的试用直接.键值就可以获得队形的VALUE

  值也可以再是一个json对象

  比如,这就是一会要用的js文件

   1 {"person":{ 2 "name":"andy", 3 "text":"hahahaha" 4 } 5 } 

  下面上js代码

  

 1 import="java.util.*" pageEncoding="UTF-8"%>
 2  3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 
 8 
 9   10     11     Ajax XML格式传输12     58   
59   
60   
61       andy
62       
63 64

 

 

初学者,这些只是个人理解。

Ajax的三种数据传输格式

标签:不刷新   element   lang   ext   方便   import   基本   获取   on()   

原文地址:http://www.cnblogs.com/wjgzuilihai/p/7336895.html


评论


亲,登录后才可以留言!