原生 JS Ajax,GET和POST 请求实例代码
javascript/js的ajax的GET请求代码如下所示:
<script type="text/javascript">
/* 创建 XMLHttpRequest 对象 */
var xmlHttp;
function GetXmlHttpObject(){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
// -----------ajax方法-----------//
function getLabelsGet(){
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
alert('您的浏览器不支持AJAX!');
return;
}
var id = document.getElementById('id').value;
var url="http://www.Leefrom.com?id="+id+"&t/"+Math.random();
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=favorOK;//发送事件后,收到信息了调用函数
xmlHttp.send();
}
function getOkGet(){
if(xmlHttp.readyState==1||xmlHttp.readyState==2||xmlHttp.readyState==3){
// 本地提示:加载中
}
if (xmlHttp.readyState==4 && xmlHttp.status==200){
var d= xmlHttp.responseText;
// 处理返回结果
}
}
</script>
javascript/js的ajax的POST请求:
<script type="text/javascript">
/* 创建 XMLHttpRequest 对象 */
var xmlHttp;
function GetXmlHttpObject(){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
// -----------ajax方法-----------//
function getLabelsPost(){
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
alert('您的浏览器不支持AJAX!');
return;
}
var url="http://www.lifefrom.com/t/"+Math.random();
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
xmlHttp.onreadystatechange=getLabelsOK;//发送事件后,收到信息了调用函数
}
function getOkPost(){
if(xmlHttp.readyState==1||xmlHttp.readyState==2||xmlHttp.readyState==3){
// 本地提示:加载中/处理中
}
if (xmlHttp.readyState==4 && xmlHttp.status==200){
var d=xmlHttp.responseText; // 返回值
// 处理返回值
}
}
</script>
注意:XMLHttpRequest 是 AJAX 的基础,在创建 XMLHttpRequest 对象时,必须与你写的ajax方法在同一个‘<script></script>'标签中!否则ajax请求会出错,并无法返回数据。 javascript/js的ajax的POST/GET请求。
原生 JS Ajax,GET和POST 请求实例代码的更多相关文章
- 原生js ajax与jquery ajax的区别
原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...
- 原生js实现文件下载并设置请求头header
原生js实现文件下载并设置请求头header const token="自行定义";//如果有 /** * 向指定路径发送下载请求 * @param{String} url 请求路 ...
- 用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...
- 新浪博客:html+css+原生JS+Ajax初级+mySql数据库——源码
**************************************************************************************************** ...
- jquery ajax jsonp跨域调用实例代码
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...
- 原生js仿淘宝手机购买选项代码
这是一款基于原生js实现仿淘宝手机信息购买选项效果源码,界面整体效果仿照淘宝购物选项设计,点击不同选项还可实时显示不同的价格计算结果,界面简洁大方.美观实用.可兼容目前最新的各类主流浏览器. 在线演示 ...
- 原生js ajax请求
什么是ajax AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新, ...
- 原生JS Ajax 请求
var username = document.getElementById('username').value; var password = document.getElementById('pa ...
- 原生js ajax 封装
首先我们先了解ajax的get和post请求分别是怎样请求数据的 get请求 let ajx = new XMLHttpRequest() //创建ajax实例 /*打开需要请求的地址,可以有三个参数 ...
随机推荐
- form表单中的带有name的标签直接转JSON
1. 将如下内容引入页面:比如说新建一个 a.js,然后在页面中引入a.js//将form表单序列化成json格式 $.fn.serializeObject = function () { var o ...
- 深入理解JAVA的多态性[转]
昨天看到一个关于多态性的帖子,参考了回帖者的理解,加入了一些自己的看法,整理出来供大家参考,不一定完全正确,欢迎大家批评指正. (一)相关类 class A ...{ public S ...
- TCP/IP,http,socket,长连接,短连接——小结。
来源:http://blog.chinaunix.net/uid-9622484-id-3392992.html TCP/IP是什么? TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层. ...
- php-fpm参数优化【转】
转自 php-fpm参数优化 | Linux运维笔记https://blog.linuxeye.com/380.html php-fpm进程设置多少合适,设成动态还是静态? <lnmp一键安装包 ...
- Shell脚本,自动化发布tomcat项目【转】
Shell脚本,自动化发布tomcat项目脚本. 1. vko2c_auto_build_by_scp.sh 文件内容: #---------------------start------------ ...
- listview解决滑动条目的时候背景变为黑色的问题
方式一:java代码: listView.setCacheColorHint(0); 方式二:布局文件 <ListView android:id="@+id/listView1&quo ...
- git clean -fdx
http://stackoverflow.com/questions/5807137/git-how-to-revert-uncommitted-changes-including-files-and ...
- THE ROAD TO PROGRAM
<The C Programming Language> <The Practice of Programming><The Art of Computer Progra ...
- JPA 系列教程5-双向一对多
双向一对多的ddl语句 同单向多对一,单向一对多表的ddl语句一致 Product package com.jege.jpa.one2many; import javax.persistence.En ...
- runtime关联属性示例
前言 在开发中经常需要给已有的类添加方法和属性,但是Objective-C是不允许给已有类通过分类添加属性的,因为类分类是不会自动生成成员变量的.但是,我们可以通过运行时机制就可以做到了. 本篇文章适 ...