<!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. 关于java socket中的read方法阻塞问题

    客户端: public class TCPClient { public static void main(String[] args) throws IOException { FileInputS ...

  2. Sequence Model-week1编程题3-用LSTM网络生成爵士乐

    Improvise a Jazz Solo with an LSTM Network 实现使用LSTM生成音乐的模型,你可以在结束时听你自己的音乐,接下来你将会学习到: 使用LSTM生成音乐 使用深度 ...

  3. UltraSoft - Beta - 测试报告

    UltraSoft - Beta - 测试报告 在测试过程中发现了多少Bug?有哪些是Beta阶段的新Bug?有哪些是Alpha阶段没有发现的Bug? 很多Bug在开发阶段就已经经过测试了,我们在Be ...

  4. 攻防世界 杂项13.can_has_stdio?

    打开发现是由trainfuck编码组成的小星星阵容,果断交给解密网站进行解密, 解密网站:http://ctf.ssleye.com/brain.html flag:flag{esolangs_for ...

  5. 有关fgetc配合feof逐行读取文件最后一行读取两遍的错觉?

    最近在做一个wifiap设置的接口,用户首先获取到当前wifi 热点的ssid 和pwd,然后修改,保存. 获取信息的时候是fopen对应的hostapd.conf文件,逐行读取,查找匹配的参数. 修 ...

  6. hdu 5179 beautiful number(构造,,,,)

    题意: 一个如果称作是漂亮数,当且仅当满足: 每一位上的数字是[1,9],从高到时低数字大小降序,且有di%dj=0(i<j) 例:931 给一个区间[L,R],问这个区间里有多少个漂亮数. 1 ...

  7. 【java+selenium3】Tesseract-OCR识别图片验证码 (十六)

    [java+selenium+Tesseract-OCR(图片识别)+AutoIt(windows窗口识别)]完成自动化图片验证码识别! 一.AutoIt(windows窗口识别)参考:https:/ ...

  8. 第一周PTA笔记 德州扑克题解

    德州扑克 最近,阿夸迷于德州扑克.所以她找到了很多人和她一起玩.由于人数众多,阿夸必须更改游戏规则: 所有扑克牌均只看数字,不计花色. 每张卡的值为1.2.3.4.5.6.7.8.9.10.11.12 ...

  9. Spring Boot核心注解

    (1)@SpringBootApplication 代表SpringBoot的启动类 (2)@SpringBootConfiguration 通过bean对象来获取配置信息 (3)@Configura ...

  10. [cf1305G]Kuroni and Antihype

    对整个过程构造一张有向图,其中$(x,y)\in E$当且仅当$x$把$y$加入,且边权为$a_{x}$ 显然这是一棵外向树森林,并再做如下两个构造: 1.新建一个点$a_{0}=0$,将其向所有入度 ...