JS原生Ajax操作(XMLHttpRequest)

GET请求

var xmld=new XMLHttpRequest();

xmld.open("GET","wan.php"+"?dd1=dong11&dd2=dong22"); //打开页面

xmld.setRequestHeader("dh","donghhhh");//设置请求头

xmld.send(null); //发送数据需要手动在url添加

xmld.onreadystatechange=function(){

if(xmld.readyState == 4){

//获取返回数据

alert(xmld.getResponseHeader("Server"));//获取响应头

alert(xmld.status+"--"+xmld.statusText);//得到如200：ok、404：Not Found 等等

alert(xmld.responseText); //得到字符串

//var xx=xmld.responseXML //得到HTML对象

}

};

POST请求

var xmld=new XMLHttpRequest();

xmld.open("POST","wan.php"); //打开页面

xmld.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求头

xmld.send("dd1=dong11&dd2=dfikij"); //发送数据

xmld.onreadystatechange=function(){

if(xmld.readyState == 4){

//获取返回数据

alert(xmld.getResponseHeader("Server"));//获取响应头

alert(xmld.status+"--"+xmld.statusText);//得到如200：ok、404：Not Found 等等

alert(xmld.responseText); //得到字符串

//var xx=xmld.responseXML //得到HTML对象

}

};

兼容性问题

if(XMLHttpRequest){

//系列操作

}else{

alert("浏览器不支持");

}

利用iframe模拟ajax

实现表单提交的返回结果在iframe中进行显示，实现主页面不刷新效果，也可以模拟上传文件，推荐使用，兼容性最好

//获取返回内容

//在点击提交按钮时给iframe添加加载完毕事件

function subd(){

//等待iframe内容加载完毕时进入

$("#ifd").on('load',function(){

//得到iframe的内容

var ifdtext=$("#ifd").contents().find("body").text();

alert(ifdtext);

});

}

基于jquery的ajax

Get请求，参数(URL，数据，回调函数)

$.get("wan.php",{namex:"myname",passwd:"123"},function(datax){

$("p").text(datax);//datax为返回的数据

});

Post请求，参数与get一致

$.post("wan.php",{namex:"myname",passwd:"123"},function(datax){

$("p").text(datax);//datax为返回的数据

});

加载HTML碎片，返回结果会覆盖掉id为div1id标签的内容

$("#div1id").load("uu.html",function(a,b,c){

if(b=="error"){

$("#div1id").text("加载失败");

}

});

结合版：

$.ajax({

url:"wan.php",

type:"POST",

//headers:{"dongh":"dongssssss"}, //设置请求头，涉及跨域时不要进行设置

data:{"xx":123456,"user":"dddd"},

success:function (data) {

alert(data);

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

// 状态码

alert(XMLHttpRequest.status);

// 状态

alert(XMLHttpRequest.readyState);

// 错误信息

alert(textStatus);

}

});

Ajax的跨域请求

如果在浏览器控制台看到类似如下的错误，表示存在跨域请求数据，即两个网页不是在同一个服务器上

Access to XMLHttpRequest at 'http://193.112.87.66/add.php?namex=myname&passwd=123' from origin 'http://192.168.43.21:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方法如下，在访问的页面中添加响应头内容

// 指定允许其他域名访问

header('Access-Control-Allow-Origin:*');

// 响应类型

header('Access-Control-Allow-Methods:POST');

// 响应头设置

header('Access-Control-Allow-Headers:x-requested-with,content-type');

异步文件上传

自定义文件上传按钮(点击试试效果)：

东文件

利用页内标签定位浮动，实现等大的input标签浮于div标签之上，并将自身透明度设置为零，span的标签为显示的文字

原生ajax文件上传

function subd(){

var fileobjx=document.getElementById("infileid").files[0];//得到文件对象

//创建form表单对象

var formobjx=new FormData();

formobjx.append("namexx","dong111");

formobjx.append("dongfile",fileobjx);

var xmld=new XMLHttpRequest();

xmld.open("POST","wan.php"); //打开页面

xmld.send(formobjx); //发送form数据

xmld.onreadystatechange=function(){

if(xmld.readyState == 4){

alert(xmld.responseText); //得到字符串

}

};

Jquery的ajax文件上传

function subd(){

var fileobjx=document.getElementById("infileid").files[0];//得到文件对象

//创建form表单对象

var formobjx=new FormData();

formobjx.append("namexx","dong111");

formobjx.append("dongfile",fileobjx);

$.ajax({

url:"wan.php",

type:"POST",

data:formobjx,

processData: false,

contentType: false,

success:function (data) {

alert(data);

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

// 错误信息

alert(textStatus);

}

});

};

[js开源组件开发]network异步请求ajax的扩展

network异步请求ajax的扩展 在日常的应用中,你可能直接调用$.ajax是会有些问题的,比如说用户的重复点击,比如说我只希望它成功提交一次后就不能再提交,比如说我希望有个正在提交的loadin ...

异步请求Ajax(取得json数据)

异步请求Ajax 没有学习Ajax之前请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源.但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异 ...

异步请求Ajax

AJAX:Asynchronous JS And XML,包括HTML.CSS.JS.DOM.XML.JSON等,客户端技术范畴.主要目标:发起异步请求/响应,实现页面内容的局部刷新,提高浏览体验:实 ...

JavaScrpit中异步请求Ajax实现

在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面. 一般来说,使用Jquery中的$.ajax,$.post,$.getJSON,非常方便,但是有的时候,我们只因为需 ...

关于异步请求AJAX的具体解释

1,异步请求的方法步骤: 1,推断当前用户支持的浏览器类型 XMLHttpRequest:推断是否支持非IE浏览器,相应的创建方法:xmlhttp = new XMLHttpRequest(); wi ...

[异步请求]ajax、axios、fetch之间的详细区别以及优缺点

1.jQuery ajax  $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () ...

jQuery异步请求ajax()之complete参数详解

请求完成后回调函数 (请求success 和 error之后均调用).这个回调函数得到2个参数:XMLHTTPRequest) 对象和一个描述请求状态的字符串("success", ...

异步请求 ajax的使用详解

https://blog.csdn.net/happyaliceyu/article/details/52381446 可以说是很详细了,赞

随机推荐

Edge.js：让.NET和Node.js代码比翼齐飞

通过Edge.js项目,你可以在一个进程中同时运行Node.js和.NET代码.在本文中,我将会论述这个项目背后的动机,并描述Edge.js提供的基本机制.随后将探讨一些Edge.js应用场景,它在这 ...

VC++模态对话框和非模态对话框

MFC中有两种类型的对话框:模态对话框和非模态对话框.  模态对话框是指当其显示时,程序会暂停执行,直到关闭这个模态对话框后,才能继续执行程序中其他任务.非模态对话框是指当其显示时,允许转而执行程序中 ...

Centos 安装docker报错

错误信息: 安装报错:Transaction check error:  file /usr/lib/systemd/system/blk-availability.service from inst ...

C语言实现单链表的逆置

单链表的逆置是一个非常经典的问题,这里利用两个思想进行解决.       首先,我们需要看下原理图,其实两个思想都是一样的,都是使后一个的节点的 next 指针指向前一个节点,依次递推,直 ...

Linux下实现秒级定时任务的两种方案(crontab 每秒运行)

第一种方案,当然是写一个后台运行的脚本一直循环,然后每次循环sleep一段时间. while true ;do command sleep XX //间隔秒数 done 第二种方案,使用crontab ...

第二卷 Spring羊群理论

写在前面: 话说这天小迦罗在和哑圣观察者聊天时,哑圣谈到自己比较喜欢吃羊,这时候小迦罗说自己的爸爸也喜欢吃,就给哑圣老师讲了他小时候在春天里放羊的故事还有参观Spring的事情.(后面以此抛砖引玉可以 ...

DNS区域传送、子域授权

前言 DNS服务器搭建参考上一篇: DNS主从复制,就是将主DNS服务器的解析库复制传送至从DNS服务器,进而从服务器就可以进行正向.反向解析了.从服务器向主服务器更新查询数据,保证数据一致性,此为区 ...

用js如何获取file是否存在

其实注意点就可以知道了. 举个例子 firebug看出这代码: