js ajax 请求
<!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 请求的更多相关文章
- js ajax请求传token
js ajax请求传token 方法一: headers: { Authorization: "BasicAuth " + token } 方法二: beforeSend: fu ...
- 当跨域时,js ajax 请求出现options请求
上面有文章说过http的options. 查了很久.试了很多版本的jQuery,下面这段代码在同事的机子上测试是没有问题的.正常 的请求, 一在我机子上面就会出现option,网上说先向服务器预检等. ...
- [JS] Ajax请求会话过期处理
对于页面来说,处理session过期比较简单,一般只需在过滤器里面判断session用户是否存在,不存在则跳转页面到登陆页即可. 对于Ajax请求来说,这个办法则无效,只能获取到登录页的html代码. ...
- 使用js+Ajax请求API接口数据-带请求头方式
C# http请求带请求头部分 先上代码: <script type="text/javascript"> function zLoginCheck() { var A ...
- JS ajax请求参数格式( formData 、serialize)
$("#importBtn").click(function(){ if($("#conId").val() == ""){ alert(& ...
- 原生js ajax请求
什么是ajax AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新, ...
- js ajax请求
var XMLHttpReq; function createXMLHttpRequest() { try { XMLHttpReq = new ActiveXObject("Msxml2. ...
- 原生JS Ajax 请求
var username = document.getElementById('username').value; var password = document.getElementById('pa ...
- 纯js Ajax 请求
var XMLHttpReq; function createXMLHttpRequest() { if(window.ActiveXObject ) { try { XMLHttpReq = new ...
随机推荐
- 对JavaScript中局部变量、全局变量和闭包的理解
对js中局部变量.全局变量和闭包的理解 局部变量 对于局部变量,js给出的定义是这样的:在 JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它.(该变量的作用域 ...
- 身份证归属地查询免费api接口
描写叙述 :依据身份证编号 查询归属地信息. 调用地址: http://api.k780.com:88/? app=idcard.get&idcard=510103195309280011&a ...
- POJ 3692 Kindergarten(二分图最大独立集)
题意: 有G个女孩,B个男孩.女孩彼此互相认识,男孩也彼此互相认识.有M对男孩和女孩是认识的.分别是(g1,b1),.....(gm,bm). 现在老师要在这G+B个小孩中挑出一些人,条件是这些人都互 ...
- 二,zabbix与php的一些问题
zabbix 检查先决条件 一.php-bcmath 不支持 php 安装 bcmath 扩展(编译安装) PHP的linux版本需要手动安装BCMath扩展,在PHP的源码包中默认包含BCMath的 ...
- 记录自己的踩坑第一天 | CSS:vertical-align 属性
前言 最近老师让大家单独写前后端分离项目,真是大家卷完后端,一起去卷前端了.(我以前都是主要负责后端,处于只大致看的懂的级别,说多了都是泪啊). 真是处于一边学一边写的状态,基本就是每天早上看上两~三 ...
- shell脚本 PHP+swoole的安装
#!bin/bash set -e # Check if user is root if [ $(id -u) != "0" ]; then echo "Error: p ...
- Matlab画colormap的一种色彩搭配方法
声学与振动数据分析经常需要画colormap,来识别是结构频率共振,还是激励源阶次问题,比如图1,横坐标表示电机的转速,负值表示CW(顺时针)方向转动,正值表示CCW逆时针方向转动.Y轴表示对应的声音 ...
- VLAN技术 & ACL访问控制
VLAN介绍与配置 VLAN概述 交换网络中的问题 VLAN(Virtual Local Area Network) 在物理网络上划分出逻辑网 ,对应OS模型第二层 VLAN划分不受端口物理位置限制, ...
- C++ 指针的引用和指向引用的指针
指向引用的指针 简单使用指针的一个例子就是: int a = 1; int *p = &a; 预先强调: 没有指向引用的指针 原因: 因为引用 不是对象,没有地址. 但是指向引用的指针是什么形 ...
- django的增删改查
前置条件: 已有一个model (tbl_user) ,用户表 1.查询 # 查询用户表 username是cx的数据 user_object = tbl_user.objects.filter(us ...