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类库的话,需要在表单里面添加一个隐藏 ...
随机推荐
- jmeter4.0，启动jmeter.bat闪退问题
问题描述: 电脑重装win10系统,配置好了java环境后,解压jmeter的zip包,然后按照网上的教程配置环境变量,然后兴冲冲启动jmeter.bat,结果,闪退,甚至连个报错信息都没有... 然 ...
- 使用python绘制世界人口地图及数据处理
本篇我们来说:下载和处理json格式的文件,并通过pygal中的地图工具来实现数据可视化 ------------------------------------------------------- ...
- Java中的内存
目录 栈(Stack):存放的都是方法中的局部变量.方法的运行一定要在栈当中. 堆(Heap):凡是new出来的东西,都在堆内存当中 方法区(Method Area):存储.class相关信息,包含方 ...
- 博客第一天：常用的DOS命令
打开CMD的方式: 1.开始+系统+命令提示符 2.Win键+R 输入cmd打开控制台[推荐使用] 3.在任意文件夹下,按住Shift键+鼠标右击, 选择 ”在此处打开Powershell窗口(S)“ ...
- spring学习笔记（八）webSocket
知识储备 什么是stomp? 我们可以类比TCP与Http协议,我们知道Http协议是基于TCP协议的,Http协议解决了 web 浏览器发起请求以及 web 服务器响应请求的细节,我们在编码时候只要 ...
- jQuery中val() text()和html()的区别
2020年4月21日 16:48:11 jQuery 学习 html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样.text() 它可以设置和获取起始标 ...
- 创造DotNet Core轻量级框架【二】
上一篇 创造DotNet Core轻量级框架[一] 10 题外话 上一篇文章感谢大家提出的各种小建议和各种讨论,但是在写文章的时候框架最最最基础的样子已经做出来了,所以大家的各种建议和意见我会在后续逐 ...
- .NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
依赖倒置原则(DIP) 依赖倒置(Dependency Inversion Principle,缩写DIP)是面向对象六大基本原则之一.他是指一种特定的的解耦形式,使得高层次的模块不依赖低层次的模块的 ...
- 第一行Kotlin系列（三）Intent 向上一页返回数据onActivityResult的使用
1.MainActivity.kt跳转处理 声明全局的按钮对象 private lateinit var button8: Button 实例化按钮对象 button8 = findViewById( ...
- {bzoj2338 [HNOI2011]数矩形 && NBUT 1453 LeBlanc}平面内找最大矩形
思路: 枚举3个点,计算第4个点并判断是否存在,复杂度为O(N3logN)或O(N3α) 考虑矩形的对角线,两条对角线可以构成一个矩形,它们的长度和中点必须完全一样,于是将所有线段按长度和中点排序,那 ...