XMLHttpRequest实现Ajax &数据格式JSON
GET请求
index
<%@ 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">
window.onload = function() {
//1.获取a节点并对其添加onclick响应函数
document.getElementsByTagName("a")[0].onclick = function() { //3.创建一个XMLHttpRequest对象
var request = new XMLHttpRequest(); //4.准备发送请求的数据：url
var url = this.href + "?time=" + new Date();//不同的时间戳，来达到禁用缓存的目的
var method = "GET"; //5.调用XMLHttpRequest 对象的open方法
request.open(method, url); //6.调用XMLHttpRequest 对象的send方法
request.send(null); //7.为XMLHttpRequest 对象添加onreadystatechange 响应函数
request.onreadystatechange = function() {
//alert(request.readyState);
//8.判断响应是否完成：XMLHttpRequest 对象的readyState 属性值为4的时候
if (request.readyState == 4) {
//9.在判断响应是否可用：XMLHttpRequest 对象status 属性值为200
if (request.status == 200 || request.status == 304) {
//10.打印响应结果： responseText
alert(request.responseText); }
}
}
//2.取消 a节点的默认行为
return false;
}
}
</script>
</head>
<body>
<a href="helloAjax.txt">HelloAjax</a>
</body>
</html>
post请求
index2
<%@ 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">
window.onload = function() {
//1.获取a节点并对其添加onclick响应函数
document.getElementsByTagName("a")[0].onclick = function() { //3.创建一个XMLHttpRequest对象
var request = new XMLHttpRequest(); //4.准备发送请求的数据：url
var url = this.href + "?time=" + new Date();//不同的时间戳，来达到禁用缓存的目的
var method = "POST"; //5.调用XMLHttpRequest 对象的open方法
request.open(method, url); request.setRequestHeader("ContentType",
"application/x-www-form-urlencode");//符合的编码格式
//6.调用XMLHttpRequest 对象的send方法
request.send("name = 'colin'"); //7.为XMLHttpRequest 对象添加onreadystatechange 响应函数
request.onreadystatechange = function() {
//alert(request.readyState);
//8.判断响应是否完成：XMLHttpRequest 对象的readyState 属性值为4的时候
if (request.readyState == 4) {
//9.在判断响应是否可用：XMLHttpRequest 对象status 属性值为200
if (request.status == 200 || request.status == 304) {
//10.打印响应结果： responseText
alert(request.responseText); } }
} //2.取消 a节点的默认行为
return false;
}
}
</script>
</head>
<body>
<a href="helloAjax.txt">HelloAjax</a>
</body>
</html>
数据格式JSON
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
数据放在一对大括号里 ，是键值对的集合，用冒号赋值
多个键值对使用逗号分隔，值本身还可以是json对象，也可以是方法(存储函数)
对象描述中的数据可以是字符串，数字或者布尔值。
*/
var jsonObject = {
"name" : "hemiao",
"age" : 22,
"address" : {
"city" : "Anhui",
"school" : "anshida"
},
"teaching" : function() {
alert("java+ssm ...");
}
};
// alert(jsonObject.name);
// alert(jsonObject.address.city)
// jsonObject.teaching() var jsonStr = "{'name':'文静'}"; // 把一个字符串转为json对象
// alert(jsonStr.name); // 使用eval()方法, 可以把一个字符串转为本地的js代码来执行
var testStr = "alert('hello eval')";
eval(testStr); //把json字符串转为JSON对象
var json = eval("(" + jsonStr + ")");//需要加括号才可以的
alert(json.name)
</script>
</head>
<body> </body>
</html>
XMLHttpRequest实现Ajax &数据格式JSON的更多相关文章
- Ajax，Json数据格式
同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随 意做其他事 ...
- ajax使用json数据格式--无效的 JSON 基元
ajax使用json数据格式提交 一开始这么写的 var flobj = { UserId: userid, ForbidSDT: ForbidSDT, ForbidEDT: ForbidEDT } ...
- Django--多对多表的创建、contentType、ajax、ajax传输json数据格式、ajax传输文件数据、 自定义分页器
MTV与MVC(了解): MTV模型(Django用的就是MTV): M:模型层(models.py) T:templates C:views MVC模型: M:模型层(models.py) V:视图 ...
- python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
- Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
- jQuery中使用Ajax获取JSON格式数据示例代码
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...
- javaWeb - 2 — ajax、json — 最后附：后台获取前端中的input type = "file"中的信息 — 更新完毕
1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...
- qt qml ajax 获取 json 天气数据示例
依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...
- Ajax与json在前后端中的细节解惑
ajax请求JSON Thinkphp中对是否为Ajax的判断,在TP3.2开发手册中有这么一段:“需要注意的是,如果使用的是ThinkAjax或者自己写的Ajax类库的话,需要在表单里面添加一个隐藏 ...
随机推荐
- python基础入门教程（一条龙服务）
一.语言基础 01-1 计算机系统 解释器下载 变量 小整数池 01-2 垃圾回收机制 02 数据类型 运算符(解压赋值等) 03 流程控制 if while for 04 整形 字符串 列表 0 ...
- 题目分享X
题意:一张票有n位数,如果这张票的前一半数字的和等于后一半数字的和(n一定是偶数),就称这张票为快乐票.有些数被擦除了,标记为’?’(’?‘的个数也是偶数),现在Monocarp 和 Bicarp 进 ...
- file download hash mismatch
在linux中使用cmake时,遇到了"file download hash mismatch",同时status显示"unsupported protocol" ...
- Python高级编程-Python一切皆对象
Python高级编程-Python一切皆对象 Python3高级核心技术97讲 笔记 1. Python一切皆对象 1.1 函数和类也是对象,属于Python的一等公民 ""&qu ...
- db连接池
目前常用的连接池有: DBCP:org.apache.commons.dbcp.BasicDataSource dataSource: 要连接的 datasource (通常我们不会定义在 serve ...
- 【HDU4990】递推式
题目大意:给定序列 1, 2, 5, 10, 21, 42, 85, 170, 341 …… 求第n项 模 m的结果 递推式 f[i] = f[i - 2] + 2 ^ (i - 1); 方法一: ...
- [hdu4552]最长公共前缀
题意:给一个串s,求s的每个前缀出现次数之和. 思路:对于一个后缀i,设i和原串的最长公共前缀为k,则当前总共可以产生k个答案.因此原题转化为求所有后缀与原串的最长公共前缀之和.模板题.以下为通过模板 ...
- javascript实现checkbox提交submit请求
javascript实现checkbox提交submit请求 背景:使用django模板中for来形成多个checkbox,需要点击单个checkbox并查询数据触发submit请求到后台,djang ...
- case when的使用-解决分表查数据给某一个字段
一个表中存的是目前有效的菜单,另外一个表中存的是有效菜单的历史更改数据 需要查询历史数据的时候,带上访问的历史数据菜单名称 SELECT msg.msg_id, msg.from_user_name, ...
- API 网关 Kong
什么是 API 网关? 所谓网关,主要作用就是连接两个不同网络的设备,而今天所讲的 API 网关是指承接和分发客户端所有请求的网关层. 为什么需要网关层?最初是单体服务时,客户端发起的所有请求都可以直 ...