摘要:原生操作异步请求第一步创建对象判断用户的浏览器类型,决定使用何种方式对象感知状态,当状态改变是会触发事件当前状态为时,数据接收完毕输出响应信息设置传递的信息小明处理中文乱码第二步创建一个请求,并设置请求地址及异步请求方式第三步发送请求异步请
原生ajax操作
JavaScript 异步 GET请求
// 第一步:创建ajax对象 //判断用户的浏览器类型,决定使用何种方式ajax对象 if (typeof ActiveXObject != "undefined") { var version = [ "Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.3.0", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP" ]; for (var i = 0; i <= version.length; i++) { try { var obj = new ActiveXObject(version[i]); if (typeof obj != "undefined") { break; } } catch(ex) { } } } else { var obj = new XMLHttpRequest(); } // 感知ajax状态,当ajax状态改变是会触发事件onreadystatechange obj.onreadystatechange = function(){ // 当前状态为4时,数据接收完毕 if (obj.readyState == 4 && obj.status == 200) { // 输出响应信息 alert(obj.responseText); } } // 设置GET传递的信息 var name = "小明"; // 处理中文乱码 name = encodeURIComponent(name); // 第二步:创建一个HTTP请求,并设置"请求地址"及异步请求方式 obj.open("get", "./test.php?fname=" + name + "&addr=beijing", true); // 第三步:发送请求 obj.send();
JavaScript 异步 POST请求
// 创建Ajax对象 //判断用户的浏览器类型,决定使用何种方式ajax对象 if (typeof ActiveXObject != "undefined") { var version = [ "Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.3.0", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP" ]; for (var i = 0; i <= version.length; i++) { try { var obj = new ActiveXObject(version[i]); if (typeof obj != "undefined") { break; } } catch(ex) { } } } else { var obj = new XMLHttpRequest(); } // 感知Ajax状态,当Ajax状态改变时会触发事件onreadystatechange obj.onreadystatechange = function(){ // 当前状态为4时,数据接收完毕 if (obj.readyState == 4 && obj.status == 200) { // 输出响应信息 alert(obj.responseText); } } // 创建一个http请求,并设置“请求地址”及异步请求方式 obj.open("post", "./test.php"); // 设置HTTP头协议信息 obj.setRequestHeader("content-type", "application/x-www-form-urlencoded"); var info = "fname=" + "小明" + "&addr=beijing"; // 发送请求 obj.send(info);
jQuery-ajax操作自行下载并引入jquery:
jQuery 异步 GET请求
// 1.直接请求 // $(function(){ // $.ajax("./test.php", { // data:{name:"tom",age:23}, // success:function(msg){ // alert(msg); // } // }); // }); // 2.配置setting参数请求 // $(function(){ // $.ajax({ // type:"GET", // url:"./test.php", // data:{name:"tom", age:23}, // success:function(msg){ // alert(msg); // } // }); // }); // 3.通过$.ajaxSetup()方法预先设置全局参数 // $(function(){ // // 预先设置全局参数 // $.ajaxSetup({ // type:"GET", // url:"./test.php", // data:{name:"tom",age:23}, // success:function(msg){ // alert(msg); // } // }); // // 执行ajax操作,使用全局函数 // $.ajax(); // }); // 4.利用$.get()方法请求 //只发送get请求 // $(function(){ // $.get("./test.php"); // }); // 发送get请求并接受返回结果 // $(function(){ // $.get("./test.php", function(msg){ // alert(msg); // }); // }); // 发送请求并传递数据 // $(function(){ // $.get("./test.php", {name:"tom",age:23}, function(msg){ // alert(msg); // }); // }); // 发送get请求并传递数据,接受返回结果,显示返回格式 // $(function(){ // $.get("./test.php", {name:"tom",age:23}, function(msg){ // alert(msg.name + " " + msg.age); // }, "json"); // }); // 使用$.getJSON()可以实现同样的功能 $.getJSON("./test.php", {name:"tom", age:23}, function(msg){ alert(msg.name + " " + msg.age); });
jQuery 异步 POST请求
jquery-ajax发送post请求 Ajax无刷新评论
jQuery-ajax&php跨域请求问题
第一种方法JSONP
注意:JSONP只支持get请求
1.首先在jquery-ajax配置参数中添加这两项dataType: "jsonp", jsonp: "callback",
例如
$.ajax({ type: "GET", url: "http://127.0.0.1/ajax2/serverjsonp.php?number=" + $("#keyword").val(), dataType: "jsonp", jsonp: "callback", success: function(data) { if (data.success) { $("#searchResult").html(data.msg); } else { $("#searchResult").html("出现错误:" + data.msg); } }, error: function(jqXHR){ alert("发生错误:" + jqXHR.status); }, });2.然后,在php中做修改
$jsonp = $_GET["callback"]; echo $jsonp . "({"success":false,"msg":"参数错误"})"; //输出的字符串前面要拼接上jsonp
第二种方法XHR2
注意:其他浏览器都支持,但是IE必须得IE10以上,只需要服务端接口加上以下头信息
header("Access-Control-Allow-Origin:*"); //允许所有访问 header("Access-Control-Allow-Origin", "http://my.domain.cn:8080"); //只允许特定域名访问 header("Access-Control-Allow-Methods:POST,GET"); //允许跨域请求的方法,可以做限定 header("Access-Control-Allow-Credentials:true"); //请求的时候是否带上cookie信息
JavaScript-ajax请求xml数据
xml示例
wendy 35 Santa Fe Yaphet 32 Balchik Isaiah 35 Caldera
js示例
Ajax获取XML信息 Ajax获取XML信息
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/99559.html
摘要:常见面试题什么是,为什么要使用是的缩写。该对象在中首次引入,它是一种支持异步请求的技术。头信息已经接收,响应数据尚未接收。同源策略是客户端脚本尤其是的重要的安全度量标准。这样页面的所有都会执行这条语句就是不需要保存缓存记录。 AJAX常见面试题 什么是AJAX,为什么要使用Ajax AJAX是Asynchronous JavaScript and XML的缩写。他是指一种创建交互式网页...
摘要:一个没有返回值的函数执行的效果其实是利用它的副作用一个没有返回值和利用副作用的函数其实就是一个黑洞。 本篇博客尚未上传 github github 首页(star+watch,一手动态直达): https://github.com/HCThink/h-blog 掘金 link , 掘金 专栏 segmentfault 主页 原创禁止私自转载 异步处理方案系列- 1.call...
摘要:事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。事件触发时,表示异步任务完成,会将事件监听器函数封装成一条消息放到消息队列中,等待主线程执行。 一. 单线程 我们常说JavaScript是单线程的。 所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个。不妨叫它主线程。 但是实际上还存在其他的线程。例如:处理AJAX请求的线程、处理DOM事件的线...
摘要:例如处理请求的线程处理事件的线程定时器线程读写文件的线程例如在中等等。事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。事件触发时,表示异步任务完成,会将事件监听器函数封装成一条消息放到消息队列中,等待主线程执行。 一. 单线程 我们常说JavaScript是单线程的。 所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个。不妨叫它主线程。 但是实...
阅读 1380·2021-11-25 09:43
阅读 2231·2021-09-27 13:36
阅读 1092·2021-09-04 16:40
阅读 1931·2019-08-30 11:12
阅读 3292·2019-08-29 14:14
阅读 547·2019-08-28 17:56
阅读 1298·2019-08-26 13:50
阅读 1228·2019-08-26 13:29