原生ajax get写法,[代码]JS原生Ajax,GET和POST

最新推荐文章于 2024-04-30 16:21:35 发布

weixin_39710991

最新推荐文章于 2024-04-30 16:21:35 发布

阅读量202

点赞数

文章标签：原生ajax get写法

本文详细讲解了JavaScript的原生Ajax技术，包括GET和POST请求的实现，XMLHttpRequest对象的创建，以及如何处理响应。通过实例展示了如何在不同浏览器环境下使用Ajax进行异步数据交互，并对比了与jQuery插件的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript/js的ajax的GET请求：

/* 创建 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;

// 处理返回结果

}

javascript/js的ajax的POST请求：

/* 创建 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; // 返回值

// 处理返回值

}

注意：XMLHttpRequest 是 AJAX 的基础，在创建 XMLHttpRequest 对象时，必须与你写的ajax方法在同一个‘’标签中！否则ajax请求会出错，并无法返回数据。 javascript/js的ajax的POST/GET请求。

JS原生ajax

原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...

JS原生ajax与Jquery插件ajax深入学习

序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

js原生Ajax的封装与使用

一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...

js原生Ajax 的封装和原理

原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...

JS原生Ajax&amp&semi;Jquery的Ajax技术&amp&semi;Json

1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...

js原生Ajax(十四)

一.XMLHttpRequest [使用XMLHttpRequest时,必须将html部署到web服务器中]1) 指定请求1.实例化eg: var http = new XMLHttpReque ...

Jquery学习笔记 --ajax删除用户，使用了js原生ajax

主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 2

Jquery学习笔记(10)--ajax删除用户，使用了js原生ajax

主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php:

js原生ajax与jquery的ajax的用法区别

什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onre ...

随机推荐

html 报表导出excel防止数字变科学计数

在html 标签加: 在要导出的tr加: &l ...

RCC BUCK变压器设计

RCC电路工作于临界模式,不是固定工作频率,其设计遵从BUCK原理.Buck电路在最高输入电压时为电感最恶劣工作条件: 以下图为例: 1.首先设定如下参数:输入电压Vin,输出电压Iout,工作频率f ...

ubuntu免验证登陆权限问题

由于经常ssh到服务器,每次输入密码很烦.就传了本机公钥到服务器. 和所有教程将的一样,做起来挺简单的. 本机ssh-keygen -t rsa生成公钥和密钥. 将公钥传至服务器,用户目录下.ssh/ ...

Mysql中Insert into xxx on duplicate key update问题

要点:Insert into xxx on duplicate key update可以在唯一索引重复的情况下,进行更新操作. (1) 插入里边的字段应该只有一个唯一索引: ...

用ingress的方式部署jenkins，启动后提示没有下载插件，未解决

[root@node2 .docker]# docker logs 5c3dd117a10dRunning from: /usr/share/jenkins/jenkins.warwebroot: E ...

Java伪代码描述《大道至简》第一章

第一节 Begin //原始需求惩山北之塞,出入之迂 //项目沟通的基本方式聚室而谋曰 //项目目标毕力平险,指通豫南,达于汉阴 //技术方案扣石垦壤,箕畚运于渤海之尾 //技术人员和工程管理 ...

windows10，redhat6&period;5下python3&period;5&period;2使用cx&lowbar;Oracle链接oracle

0.序言项目主要使用oracle但是我不太喜欢其他编程语言,加上可能需要用python部署算法包,从oracle表中读出数据,处理完成后在放回oracle中去,所以在windows上就想到先用pyt ...

volatile分析

volatile三大特性: 1. 内存可见性 2.不保证原子性 3. 禁止重排序内存屏障的概念:memory barrier是一个CPU指令.指令逻辑:a.确保一些特定操作执行顺序 b.影响一些数据的 ...

Golang中的函数

函数在go语言中,函数的基本组成为:关键字func.函数名.参数列表.返回值.函数体和返回语句函数的定义定义一个最简单的加法函数 func Add(a int,b int)(ret int,er ...

vs2010如何安装qt插件

Qt默认使用mingw编译,不支持VS编译器,因此,如果需要用VS开发,需要将Qt重新编译.前提:Qt已安装(http://qt.nokia.com/downloads-cn),VS已安装. 1.下载 ...