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类库的话,需要在表单里面添加一个隐藏 ...
随机推荐
- andorid jar/库源码解析之EventBus
目录:andorid jar/库源码解析 EventBus: 作用: 用于不同Activity,Service等之间传递消息(数据). 栗子: A页面:onCreate定义 EventBus.ge ...
- spring源码阅读笔记10：bean生命周期
前面的文章主要集中在分析Spring IOC容器部分的原理,这部分的核心逻辑是和bean创建及管理相关,对于单例bean的管理,从创建好到缓存起来再到销毁,其是有一个完整的生命周期,并且Spring也 ...
- MongoDB JAVA开发
简介 MongoDB是一个基于内存的NoSql(非关系型数据库)．具有NoSql的特点,读写快(key-value),不适合持久化但都提供此功能． 用途 我用来存放页面模板 用法 依赖 <dep ...
- 自己动手写RPC
接下来2个月 给自己定个目标 年前 自己动手做个RPC 框架 暂时技术选型 是 dotcore + netty + zookeeper/Consul
- 【HBase】表模型和基本操作介绍
目录 HBase表模型 常用Shell操作 HBase表模型 创建一个hbase表,必须要有表名和列族名 列族 -- columnFamily,就是上图中的Column Family1 userInf ...
- 美团分布式ID生成框架Leaf源码分析及优化改进
本文主要是对美团的分布式ID框架Leaf的原理进行介绍,针对Leaf原项目中的一些issue,对Leaf项目进行功能增强,问题修复及优化改进,改进后的项目地址在这里: Leaf项目改进计划 https ...
- 一阶RC高通滤波器详解（仿真+matlab+C语言实现）
文章目录 预备知识 关于电容 HPF的推导 simulink 仿真 simulink 运行结果 matlab 实现 matlab 运行结果 C语言实现 如果本文帮到了你,帮忙点个赞: 如果本文帮到了你 ...
- Linux高性能服务器技术总结
文章目录 1 服务器简介 2 I/O复用技术 2.1 循环方式 2.2 select 方式 2.3 poll方式 2.4 epoll 方式 3 多线程方式 4 CPU多核并行计算 5 深度分析内核性能 ...
- 新鲜出炉高仿网易云音乐 APP
我的引语 晚上好,我是吴小龙同学,我的公众号「一分钟GitHub」会推荐 GitHub 上好玩的项目,一分钟 get 一个优秀的开源项目,挖掘开源的价值,欢迎关注我. 项目中成长是最快的,如何成长,就 ...
- jvm启动参数调优
1.背景 eclipse启动了一个项目,用了15分钟,我佛了,在家办公也懒得弄一直没管,好嘛,越用越气,越来越慢,现在启动一次要半小时了,气不气,然后下定决心调优一下. 2.知识库(自认为调优重要的几 ...