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. Jenkins 项目构建

    一:新建项目 (1)点击新建,输入项目名称--构建一个自由风格的软件项目,点击ok (2)构建触发器-----设置每两分钟执行一次 其中有5个参数 (*****) 第一个是代表分钟  一小时内的分钟数 ...

  2. muduo网络库源码学习————线程类

    muduo库里面的线程类是使用基于对象的编程思想,源码目录为muduo/base,如下所示: 线程类头文件: // Use of this source code is governed by a B ...

  3. requests抓取数据示例

    1:获取豆瓣电影名称及评分 # 抓取豆瓣电影名称及评分 url="https://movie.douban.com/j/search_subjects" start=input(& ...

  4. Java中常用的获取从当前月开始的前第i个月、取结束时间与开始时间相差多少个月份等的方法

    @RunWith(SpringRunner.class) @SpringBootTest public class DateTest { @Test public void test(){ DateF ...

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

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

  6. 1018 Public Bike Management (30分) 思路分析 + 满分代码

    题目 There is a public bike service in Hangzhou City which provides great convenience to the tourists ...

  7. Atcoder Beginner Contest 167

    赛场实况: 训练反思: A题签到不说了,B题第一眼没看清楚数据范围,写了一堆然后仔细一看1e12果断不能暴力..立马换了一个写法,连交2发wa(细节啊细节!!),C题看了半天英语没看懂说了什么,拿翻译 ...

  8. 黑马程序员_毕向东_Java基础视频教程——转义字符（随笔）

    转义字符 转义字符 通过 \ 来转变后面的字母或符号的含义 \n :换行 \b :退格.相当于 backspace \r : 相当于回车键. Windows系统中,回车是由两个字符来表示 \r \n. ...

  9. vue富文本编辑器TinyMec才是最好用的

    最近在做一个后台管理系统,系统中需要一个编辑器,没多想,百度查之,找了好些.如下: UEditor CKEditor 4 Vue-html5-editor wangeditor quill .... ...

  10. spark机器学习从0到1特征选择-卡方选择器（十五）

      一.公式 卡方检验的基本公式,也就是χ2的计算公式,即观察值和理论值之间的偏差   卡方检验公式 其中:A 为观察值,E为理论值,k为观察值的个数,最后一个式子实际上就是具体计算的方法了 n 为总 ...