<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

        window.onload = function() {

            var Obtn = document.querySelector('input');

            Obtn.onclick = function() {

                // 创建一个XMLHttpRequest 对象，这是ajax请求的核心；这里采用一个三元选择，是为了兼容ie6/ie5

                // 在ie6/ie5中，使用new ActiveXObject('Microsoft.XMLHTTP')创建XMLHttpRequest对象

                var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.XMLHTTP');

                // xhr.withCredentials = true;

                // 获取ajax请求地址,在地址后面加入一个随机数，是为了解决ie浏览器的识别问题，ie浏览器相同的请求地址，不会再次进行请求，

                // 加入一个随机数之后，再次请求时，ie会解析为不同的地址

                var url = 'http://xxxxxx?params=111';

                // 对请求的状态进行监控

                // 0 -- 未初始化，确认XMLHttpRequest 对象已经创建，并为调用open()方法初始化做准备

                // 1-- 载入，对XMLHttpRequest 对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置，并调用send()方法向服务器端发送请求。1表示正在向服务端发送请求

                // 2--载入完成，收到服务器的相应数据，但是只是原始数据，并不能直接在客户端使用。值为2表示已经接收完全部相应数据，并为下一阶段解析做好准备

                // 3--交互数据，解析相应数据，即根据服务器端相应头部返回的MIME类型把数据转换成能通过 responseBody,responseText,responseXML属性存取的格式,为在客户端调用做好准备。

                // 值为3表示正在解析数据

                // 4--完成， 此阶段确认全部数据都已经解析为可以在客户端使用的数据， 解析已经完成。 值为4表示解析完成， 可以通过XMLHttpRequest对象对应的属性获取数据

                xhr.onreadystatechange = function() {

                    if (xhr.readyState == 4) {

                        // 将XMLHttpRequest返回的数据转换成为json格式（因为返回来的是一个字符串）

                        var obj = JSON.parse(xhr.responseText);

                        var str = '';

                        // 遍历obj

                        for (var key in obj) {

                            str += "<p>" + key + "," + obj[key] + "</p>";

                        }

                        // 输出obj

                        document.querySelector('.box').innerHTML = str;

                    }

                }

                xhr.open('GET', url, true);

                xhr.send(null);

            }

        }

    </script>

</head>

<body>

<input type='button' value="ajax请求调用数据">

<div class='box'></div>

</body>

</html>

js ajax 请求的更多相关文章

  1. js ajax请求传token

    js  ajax请求传token 方法一: headers: { Authorization: "BasicAuth " + token } 方法二: beforeSend: fu ...

  2. 当跨域时,js ajax 请求出现options请求

    上面有文章说过http的options. 查了很久.试了很多版本的jQuery,下面这段代码在同事的机子上测试是没有问题的.正常 的请求, 一在我机子上面就会出现option,网上说先向服务器预检等. ...

  3. [JS] Ajax请求会话过期处理

    对于页面来说,处理session过期比较简单,一般只需在过滤器里面判断session用户是否存在,不存在则跳转页面到登陆页即可. 对于Ajax请求来说,这个办法则无效,只能获取到登录页的html代码. ...

  4. 使用js+Ajax请求API接口数据-带请求头方式

    C# http请求带请求头部分 先上代码: <script type="text/javascript"> function zLoginCheck() { var A ...

  5. JS ajax请求参数格式（ formData 、serialize）

    $("#importBtn").click(function(){ if($("#conId").val() == ""){ alert(& ...

  6. 原生js ajax请求

    什么是ajax AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新, ...

  7. js ajax请求

    var XMLHttpReq; function createXMLHttpRequest() { try { XMLHttpReq = new ActiveXObject("Msxml2. ...

  8. 原生JS Ajax 请求

    var username = document.getElementById('username').value; var password = document.getElementById('pa ...

  9. 纯js Ajax 请求

    var XMLHttpReq; function createXMLHttpRequest() { if(window.ActiveXObject ) { try { XMLHttpReq = new ...

随机推荐

  1. Servlet学习一（Servlet的使用流程）

    一.servlet运行流程 运行流程:浏览器发送请求到服务器,服务器根据url地址在webapps中寻找对应的项目文件夹然后再web.xml中检索对应的servlet,并进行调用二.servlet类写 ...

  2. Coursera Deep Learning笔记 序列模型（二）NLP & Word Embeddings(自然语言处理与词嵌入)

    参考 1. Word Representation 之前介绍用词汇表表示单词,使用one-hot 向量表示词,缺点:它使每个词孤立起来,使得算法对相关词的泛化能力不强. 从上图可以看出相似的单词分布距 ...

  3. [BZOI2014]大融合——————线段树进阶

    竟然改了不到一小时就改出来了, 可喜可贺 Description Solution 一开始想的是边两侧简单路径之和的乘积,之后发现这是个树形结构,简单路径数就是节点数. 之后的难点就变成了如何求线段树 ...

  4. T-SQL——函数——时间操作函数

    目录 0. 日期和时间类型 0.0 时间类型 1. 转换函数 1.1 CAST 1.2 CONVERT 2. 日期操作函数 2.0 GETDATE和GETUTCDATE 2.1 SYSDATETIME ...

  5. Verdi UVM Debug Mode 简单使用

    转载:Verdi UVM Debug Mode 简单使用_Holden_Liu的博客-CSDN博客 文档与源码: User Guide: UVMDebugUserGuide.pdf  in $VERD ...

  6. git merge远程合并

    当某个分支上的开发工作完成后需要将其合入主分支master 但是在提交合并前我们自己最好做一次衍合,目的是检测是否有冲突的风险,如果有应该在本分支先解决冲突然后在提交合并. 否则解决冲突的工作就全部转 ...

  7. 有向路径检查 牛客网 程序员面试金典 C++ Python

    有向路径检查 牛客网 程序员面试金典 C++ Python 题目描述 对于一个有向图,请实现一个算法,找出两点之间是否存在一条路径. 给定图中的两个结点的指针DirectedGraphNode* a, ...

  8. 一步一步学ROP之linux_x64篇(蒸米spark)

    目录 一步一步学ROP之linux_x64篇(蒸米spark) 0x00 序 0x01 Memory Leak & DynELF - 在不获取目标libc.so的情况下进行ROP攻击 0x02 ...

  9. 记录自己的踩坑第一天 | CSS:vertical-align 属性

    前言 最近老师让大家单独写前后端分离项目,真是大家卷完后端,一起去卷前端了.(我以前都是主要负责后端,处于只大致看的懂的级别,说多了都是泪啊). 真是处于一边学一边写的状态,基本就是每天早上看上两~三 ...

  10. Python学习路线【对标大厂Python工程师的招聘要求，并推荐优质免费资源】打卡学习不迷茫

    您好,我是码农飞哥,感谢您阅读本文,欢迎一键三连哦. 本文要点:从Python爬虫工程师的招聘要求出发制定学习路线,同时还推荐免费优质的学习资源. 打卡学习不迷茫. 干货满满,建议收藏,需要用到时常看 ...