原生AJAX请求教程
ajax
即 Asynchronous Javascript And XML,AJAX
不是一门的新的语言,而是对现有持术的综合利用。本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信.
异步:指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步。
XMLHttpRequest 对象
浏览器内建对象,用于在后台与服务器通信(交换数据) ,由此我们便可实现对网页的部分更新,而不是刷新整个页面。
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
var xhr = new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
如需将请求发送到服务器,我们使用 XMLHttpRequest
对象的 open()
和 send()
方法:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'ajax_info.json', true);
xhr.send();
方法 | 描述 |
---|---|
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 method:请求的类型;GET 或 POST url:文件在服务器上的位置 async:true(异步)或 false(同步) |
send(string) | 将请求发送到服务器。string:仅用于 POST 请求 |
get请求
get请求参数需要放在url地址的参数中。并通过urlencode的方式传参,也就是?
隔开url和参数,然后多个参数用&
连接,参数格式为:key=val
。
var xhr = new XMLHttpRequest();
xhr.open("GET","/ajax.php?fname=Henry&lname=Ford",true);
xhr.send();
post请求
post请求需要添加一个请求头,让后台知道我们请求的参数的格式,这样后台才能解析我们的数据。另外,传输的数据需要格式化到send方法中。
var xhr = new XMLHttpRequest();
xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");
接受数据并处理数据
XMLHttpRequest对象的相关属性和事件
属性 | 说明 |
---|---|
status | 200: "OK" |
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
readyState | 存有 XMLHttpRequest 的状态。请求发送到后台后,状态会从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 |
onreadystatechange | 每当 readyState 属性改变时,就会调用该函数。 |
开发人员,可以通过监听XMLHttpRequest对象的onreadystatechange事件,在事件的回调函数中判断readyState的状态,可以帮助我们进行对象请求结果的判断处理。
完整实例
- 完整的GET请求例子
// get请求
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/user?id=333', true);
xhr.send();
xhr.onreadystatechange = function (e) {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
- 完整的POST请求例子
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/user', true);
// POST请求需要设置此参数
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
xhr.send('name=33&ks=334');
xhr.onreadystatechange = function (e) {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
封装原生Ajax请求
封装get请求
/**
* Ajax的Get请求辅助方法
* @param {String} url 请求后台的地址
* @param {Function} callback 请求成之后,返回数据成功,并且调用此方法,这个方法接受一个参数就是后台返回的数据。
* @return undefined
*/
function ajaxGet(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(xhr.responseText);
}
}
}
// 调用
ajaxGet('/user.json', function (data) {
console.log(data);
});
封装post请求
function ajaxPost(url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(xhr.responseText);
}
}
}
// 调用
ajaxPost('/api/user', 'id=9&com=aicoder', function (data) {
// 后台返回的数据就是 字符串类型。要转成json,必须自己手动转换。
var user = JSON.parse(data);
console.log(user.id);
console.log(user.com);
});
原生AJAX请求教程的更多相关文章
- Servlet处理原生Ajax请求
萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介 Ajax(Asynchronous JavaScript and XML,异步JavaScript和 ...
- 原生 ajax 请求
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- js原生ajax请求get post笔记
开拓新领域,贵在记录.下面记录了使用ajax请求的get.post示例代码 //ajax get 请求获取数据支持同步异步 var ajaxGet = function (reqUrl, params ...
- JavaScript原生Ajax请求纯文本数据
源代码 ajax1.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- 前后端数据交互(二)——原生 ajax 请求详解
一.ajax介绍 ajax 是前后端交互的重要手段或桥梁.它不是一个技术,是一组技术的组合. ajax :a:异步:j:js:a:和:x:服务端的数据. ajax的组成: 异步的 js 事件 其他 j ...
- 原生ajax请求
$('#send').click(function(){ //请求的5个阶段,对应readyState的值 //0: 未初始化,send方法未调用: //1: 正在发送请求,send方法已调用: // ...
- 原生Ajax使用教程
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6682564.html 浏览器端 一:创建XMLHttpRequest对象 所有现代浏览器均支 ...
- php下的原生ajax请求
浏览器中为我们提供了一个JS对象XMLHttpRequet,它可以帮助我们发送HTTP请求,并接受服务端的响应. 意味着我们的浏览器不提交,通过JS就可以请求服务器. ajax(Asynchron ...
- 原生ajax请求的五个步骤
//第一步,创建XMLHttpRequest对象 var xmlHttp = new XMLHttpRequest(); function CommentAll() { //第二步,注册回调函数 xm ...
随机推荐
- Python3中urllib使用介绍
Py2.x: Urllib库 Urllin2库 Py3.x: Urllib库 变化: 在Pytho2.x中使用import urllib2——-对应的,在Python3.x中会使用import url ...
- IdentityServer4-快速入门
一.设置和概述 二.使用客户端凭证保护API 三.使用密码保护API 四.使用OpenID Connect添加用户验证 五.添加对外部认证的支持 六.切换到Hybrid Flow并添加API访问权限 ...
- cocoa组件化开发
[转载:http://www.cocoachina.com/ios/20171120/21234.html](http://www.cocoachina.com/ios/20171120/21234. ...
- 用Python破解斗地主残局
相信大家都玩过斗地主,规则就不再介绍了. 直接上一张朋友圈看到的残局图: 这道题我刚看到时,曾尝试用手工来破解,每次都以为找到了农民的必胜策略时,最后都发现其实农民跑不掉.由于手工破解无法穷尽所有可能 ...
- Bootstrap 警告、进度条、列表组、面板
摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...
- python魔法方法-自定义序列
自定义序列的相关魔法方法允许我们自己创建的类拥有序列的特性,让其使用起来就像 python 的内置序列(dict,tuple,list,string等). 如果要实现这个功能,就要遵循 python ...
- Windows平台交叉编译Arm Linux平台的QT5.7库
1.准备交叉编译环境 环境说明:Windows 7 64位 此过程需要: (1)Qt库开源代码,我使用的是5.7.0版本: (2)Perl语言环境5.12版本以上: (3)Python语言环境 2.7 ...
- 预编译头文件来自编译器的早期版本,或者预编译头为 C++ 而在 C 中使用它(或相反)(转)
用VC++ 2008 编写C语言程序,编译出现错误: 预编译头文件来自编译器的早期版本,或者预编译头为 C++ 而在 C 中使用它(或相反) 解决方法: 建工程时 建立空项目 或者在项目设置里关闭预编 ...
- The op amp module
- .Net Core AES加密解密
一.AES说明 高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准用来替 ...