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 id="ifd" name="dongff"></iframe>
<form action="wan.php" method="post" target="dongff">
<input type="text" name="dd1">
<input type="text" name="dd2">
<input type="submit" onClick="subd()">
</form>
//获取返回内容
<script src="jquery-3.3.1.min.js"></script>
<script>
//在点击提交按钮时给iframe添加加载完毕事件
function subd(){
//等待iframe内容加载完毕时进入
$("#ifd").on('load',function(){
//得到iframe的内容
var ifdtext=$("#ifd").contents().find("body").text();
alert(ifdtext);
});
}
</script>

基于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.

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

 <?php
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:*');
// 响应类型
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');

异步文件上传

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

东文件

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

 <div style="height: 50px;width: 80px;background-color:aqua;text-align: center;line-height: 50px;position: relative">
<span>东文件</span>
<input type="file" id="infileid" style="height: 50px;width: 80px;position: absolute;opacity: 0; bottom: 0px;left: 0px;top: 0px;right: 0px">
</div>

原生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);
} }); };

网页的异步请求(Ajax)的更多相关文章

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

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

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

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

  3. 异步请求Ajax

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

  4. JavaScrpit中异步请求Ajax实现

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

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

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

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

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

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

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

  8. 异步请求 ajax的使用详解

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

  9. 黑马学习AJAX jQuery发送异步请求 $.ajax() $.post() $.get()是在调用方法而不是定义方法

随机推荐

  1. windows任务栏IDEA图标变白色快速解决方法

    方案1:同时按Windows键+R键打开运行对话框,输入ie4uinit.exe -show然后回车即可修复. 方案2:打开计算机(Win7),此电脑(Win10)或任意文件夹,然后在地址栏输入cmd ...

  2. openwrt添加内核模块

    进行目录package/kernel mkdir url-redirect cd url-redirect [zzh@KD1 url-redirect]$ tree . |-- Makefile `- ...

  3. Java的xml与map,与Bean互转

    xml与map互转,主要使用dom4j import org.dom4j.Document; import org.dom4j.DocumentException; import org.dom4j. ...

  4. PYTHON基础入门(内置函数、推导式)学习

    **内建函数**1.通过使用dir()函数可以列出所具备的方法 例:num = 10 dir(num) 例:myList = [1,2,3,4,5,6] dir(num)2.通过使用help()函数可 ...

  5. Web性能和负载测试工具补充

    压力测试文档:https://yq.aliyun.com/articles/377543https://www.cnblogs.com/ahjxxy/archive/2012/09/17/268899 ...

  6. 异常:No Spring WebApplicationInitializer types detected on classpath

    原因: 启动服务提供者/服务消费者-->去注册中心Zookeeper无法注册这个服务 / 在监控中心无法发现服务 异常提示:No Spring WebApplicationInitializer ...

  7. bp代码

    #电池老化率测定的神经网络模型 import tensorflow as tf import numpy as np import matplotlib.pyplot as plt import pa ...

  8. tomcat与iis公用80端口(已经发布.net项目现在开发Java项目时tomcat在eclipse中localhost:8080打不开问题)

    在开发过.net项目的电脑上安装eclipse配置tomcat运行时打不开页面问题描述,这也是本人亲生经历,找了好多资料网上大多都是tomcat配置问题描述,今天突然想到是不是IIS的问题,果然上网一 ...

  9. 利用canvas实现刮刮乐效果

    最近做了个情人节表白的项目,表白内容时被遮盖的,刮开后才能显示,并且刮开一定比例后清空所有遮罩. function guaguale(obj,w,h){//obj时canvas元素 var canva ...

  10. vue.js报错:Module build failed: Error: No parser and no file path given, couldn't infer a parser.

    ERROR Failed to compile with 2 errors 12:00:33 error in ./src/App.vue Module build failed: Error: No ...