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的更多相关文章

  1. Ajax，Json数据格式

    同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待     卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随     意做其他事 ...

  2. ajax使用json数据格式--无效的 JSON 基元

    ajax使用json数据格式提交 一开始这么写的 var flobj = { UserId: userid, ForbidSDT: ForbidSDT, ForbidEDT: ForbidEDT } ...

  3. Django--多对多表的创建、contentType、ajax、ajax传输json数据格式、ajax传输文件数据、 自定义分页器

    MTV与MVC(了解): MTV模型(Django用的就是MTV): M:模型层(models.py) T:templates C:views MVC模型: M:模型层(models.py) V:视图 ...

  4. python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  5. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  6. jQuery中使用Ajax获取JSON格式数据示例代码

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...

  7. javaWeb - 2 — ajax、json — 最后附：后台获取前端中的input type = "file"中的信息 — 更新完毕

    1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...

  8. qt qml ajax 获取 json 天气数据示例

    依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...

  9. Ajax与json在前后端中的细节解惑

    ajax请求JSON Thinkphp中对是否为Ajax的判断,在TP3.2开发手册中有这么一段:“需要注意的是,如果使用的是ThinkAjax或者自己写的Ajax类库的话,需要在表单里面添加一个隐藏 ...

随机推荐

  1. C# 9.0 新特性预览 - 类型推导的 new

    C# 9.0 新特性预览 - 类型推导的 new 前言 随着 .NET 5 发布日期的日益临近,其对应的 C# 新版本已确定为 C# 9.0,其中新增加的特性(或语法糖)也已基本锁定,本系列文章将向大 ...

  2. ArcMap 0 （ArcGIS10.2安装）

    一如GIS深似海,从此相逢是故人(这句话适合初步接触GIS的,我算是初窥门径.还是道行太浅,只是多了感慨) 前言: 1. 本人GIS专业,对于ArcGIS较为熟悉.由于专业和其它经历需要,接触过不少各 ...

  3. vue项目兼容ie

    一.兼容ES6 Vue 的核心框架 vuejs 本身,以及官方核心插件(VueRouter.Vuex等)均可以在 ie9 上正常使用.但ie不兼容es6,所以需要安装插件将“Promise”等高级语法 ...

  4. SSM整合案例：图书管理系统

    目录 SSM整合案例:图书管理系统 1.搭建数据库环境 2.基本环境搭建 2.1.新建一个Maven项目,起名为:ssmbuild,添加web的支持 2.2.导入pom的相关依赖 2.3.Maven静 ...

  5. spring学习笔记（九）事务学习（上）

    前述 ​ 这段时间在工作中碰到一个事务相关的问题.先说下这个问题的场景,我们是一个商城项目,正在开发优惠券模块,现在有一个需求是需要批量领取优惠券,而且在领券时,其中一张领取失败不能影响其他符合要求的 ...

  6. 王颖奇 20171010129《面向对象程序设计（java）》第十一周学习总结

    实验十一   集合 实验时间 2018-11-8 1.实验目的与要求 (1) 掌握Vetor.Stack.Hashtable三个类的用途及常用API: (2) 了解java集合框架体系组成: (3)  ...

  7. 【Scala】scala的继承能干嘛？这段简单的代码或许能帮你梳理

    package cn.itcast.scala.demo2 class Person { //private关键字和final关键字修饰的常量无法被继承重写 val id: Int = 1 var n ...

  8. 图形学_opengl纹理映射

    学了半学期的图形学,除了几个用python或是matlab比较方便的实验外,用的大多数是opengl,在这总结一下纹理贴图实验中opengl的用法. 1.编译器连接静态库 有用到glaux.h的程序, ...

  9. 使用 pyautogui 进行跨平台的 GUI 自动化操作

    有个朋友最近问我有没有推荐 GUI 桌面应用自动化的技术,我只能回答他:不好意思,这个真有,他是 pyautogui.主要有三大特征: 纯纯的 python, 源码一览无余: 跨平台,linux, w ...

  10. Spring全家桶之SpringMVC（三）

    Spring MVC单个接收表单提交的数据   单个接收表单提交的参数 在实际开发中通过会在spring MVC的Controller里面接收表单提交过来的参数,这块代码该怎么去编写呢? 示例: 编写 ...