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. RF（常用关键字）

    一.常用关键字 Open Browser    [url | browser | alias]    打开浏览器 Close Browser     关闭当前浏览器(不是窗口) Close All B ...

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

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

  3. python数据统计分析

    1. 常用函数库   scipy包中的stats模块和statsmodels包是python常用的数据分析工具,scipy.stats以前有一个models子模块,后来被移除了.这个模块被重写并成为了 ...

  4. Datasource Server returns invalid timezone问题

    今天在学习一个项目的时候,idea中的datasource没有配置,后来发现mysql没有连接,于是下载了最新版的jdbc.jar包,连接mysql完成后,想test一下mysql connect,结 ...

  5. 用Navicat建MySQL数据库表，动态改变创建时间和更新时间戳

    1.create_time 记录创建的时间,设默认值为:CURRENT_TIMESATMP 注意:不勾选那个[根据当前时间戳更新] 2.operator_time 更新记录的时间,勾选那个[根据当前时 ...

  6. 自定义比较器(IComparer接口的实现)

    class FileNameSort : IComparer { [System.Runtime.InteropServices.DllImport("Shlwapi.dll", ...

  7. 读CSV文件并写arcgis shp文件

    一.在这里我用到的csv文件是包含x,y坐标及高程.降雨量数据的文件.如下图所示. 二.SF简介 简单要素模型(Simple Feature,SF),是 OGC 国际组织定义的面向对象的矢量数据模型. ...

  8. Vular开发手记#1：设计并实现一个拼插式应用程序框架

    可视化编(rxeditor)辑告一段落,在知乎上发了一个问题,询问前景,虽然看好的不多,但是关注度还是有的,目前为止积累了21w流量,因为这个事,开心了好长一段时间.这一个月的时间,主要在设计制作Vu ...

  9. [hdu4629 Burning]三角形面积并，扫描线

    题意:给n个三角形,分别求覆盖1次~n次的总面积 思路: 对每个y坐标作一条平行于x轴的直线,按直线从下往上处理,每两条直线之间为若干梯形(也可以是三角形)首尾相连的情况,从左扫到右时,用一个变量cn ...

  10. JAVA异常以及字节流

    异常 JAVA异常可以分为编译时候出现的异常和执行时候出现的异常 JVM默认处理异常的方法是抛出异常 异常处理 //第一种 try{ 可能会出错的代码 }catch{ 发生异常后处置方法 }final ...