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. python selenium（定位方法）

    一.定位方法 注意:元素属性必须唯一存在 #id定位 find_element_by_id() #name定位 find_element_by_name() #class_name定位 find_el ...

  2. 商汤提出解偶检测中分类和定位分支的新方法TSD，COCO 51.2mAP | CVPR 2020

    目前很多研究表明目标检测中的分类分支和定位分支存在较大的偏差,论文从sibling head改造入手,跳出常规的优化方向,提出TSD方法解决混合任务带来的内在冲突,从主干的proposal中学习不同的 ...

  3. celery的定时任务

    定时任务 Celery 中启动定时任务有两种方式,(1)在配置文件中指定:(2)在程序中指定. # cele.py import celery app = celery.Celery('cele', ...

  4. MOD3干扰

    1.MOD3干扰的定义 MOD3干扰也称模3干扰,是LTE网络内干扰的一种形式,要了解这种干扰的产生原理,就要从小区PCI入手. PCI全称PhysicalCellIdentifier,即物理小区标识 ...

  5. 远程登陆与数据CP

    1 SSH登陆原理   SSH,Secure Shell,是一套协议标准,可以用来实现两台机器之间的安全登陆以及安全的数据传送,其保证数据安全的原理是非对称加密.   传统的对称加密方式使用的是一套密 ...

  6. 剑指offer--（根据前序遍历和中序遍历）重建二叉树

    题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7, ...

  7. 第十一章：Python高级编程-协程和异步IO

    第十一章:Python高级编程-协程和异步IO Python3高级核心技术97讲 笔记 目录 第十一章:Python高级编程-协程和异步IO 11.1 并发.并行.同步.异步.阻塞.非阻塞 11.2 ...

  8. 如何使用apt-get在ubuntu系统上安装OpenJDK 8

    文章目录 添加ppa仓库 设置openjdk版本 查看java 版本 Android 8.1 系统编译的时候需要安装OpenJDK 8,这里如果可以自己下载源码编译安装,当然本想编译Android系统 ...

  9. OpenCV 3.4.2 Windows系统下的环境搭建（附带opencv_contrib-3.4.2）

    前言 当前需要回到Windows平台下进行开发,在win10系统上搭建了编译opencv3.4.2的环境,并添加opencv_contrib-3.4.2的模块,以下是本文所需要的软件以及源码. 系统: ...

  10. 一、线程 & 线程池

    一.线程的介绍 1.1.概念 进程: 你的硬盘上有一个简单的程序,这个程序叫QQ.exe,这是一个程序,这个程序是一个静态的概念,它被扔在硬盘上也没人理他,但是当你双击它,弹出一个界面输入账号密码登录 ...