资讯专栏INFORMATION COLUMN

AJAX异步请求

macg0406 / 276人阅读

摘要:原生操作异步请求第一步创建对象判断用户的浏览器类型,决定使用何种方式对象感知状态,当状态改变是会触发事件当前状态为时,数据接收完毕输出响应信息设置传递的信息小明处理中文乱码第二步创建一个请求,并设置请求地址及异步请求方式第三步发送请求异步请

原生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

    摘要:在接收响应期间持续不断地触发。在请求发生错误时触发。在通信完成或者触发或事件后触发。已经接收到部分响应数据。基于标准被广泛支持。破坏程序的异常处理机制。 原文(我的GitHub):https://github.com/liangfengbo/frontend-ability/issues/1 学习大纲 理解Ajax的工作原理 Ajax核心-XMLHttpRequest对象 封装Aja...

    megatron 评论0 收藏0
  • 深入了解ajax

    摘要:而由于安全风险的原因,被禁止使用。就好比单线程一样,请求发出后就进入阻塞状态,直到解除阻塞,余下的代码才会继续执行。安全问题暴露了与服务器交互的细节。破坏了程序的异常机制。服务器端暂时无法处理请求可能是过载或维护。 AJAX全称Asynchronous JavaScript and XML(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下...

    zhouzhou 评论0 收藏0
  • AJAX面试题都在这里

    摘要:常见面试题什么是,为什么要使用是的缩写。该对象在中首次引入,它是一种支持异步请求的技术。头信息已经接收,响应数据尚未接收。同源策略是客户端脚本尤其是的重要的安全度量标准。这样页面的所有都会执行这条语句就是不需要保存缓存记录。 AJAX常见面试题 什么是AJAX,为什么要使用Ajax AJAX是Asynchronous JavaScript and XML的缩写。他是指一种创建交互式网页...

    QiShare 评论0 收藏0
  • 异步处理方案系列- 1.callback

    摘要:一个没有返回值的函数执行的效果其实是利用它的副作用一个没有返回值和利用副作用的函数其实就是一个黑洞。 本篇博客尚未上传 github github 首页(star+watch,一手动态直达): https://github.com/HCThink/h-blog 掘金 link , 掘金 专栏 segmentfault 主页 原创禁止私自转载 异步处理方案系列- 1.call...

    anRui 评论0 收藏0
  • (转)JavaScript:同步、异步和事件循环

    摘要:事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。事件触发时,表示异步任务完成,会将事件监听器函数封装成一条消息放到消息队列中,等待主线程执行。 一. 单线程 我们常说JavaScript是单线程的。 所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个。不妨叫它主线程。 但是实际上还存在其他的线程。例如:处理AJAX请求的线程、处理DOM事件的线...

    android_c 评论0 收藏0
  • JavaScript:彻底理解同步、异步和事件循环(Event Loop)

    摘要:例如处理请求的线程处理事件的线程定时器线程读写文件的线程例如在中等等。事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。事件触发时,表示异步任务完成,会将事件监听器函数封装成一条消息放到消息队列中,等待主线程执行。 一. 单线程 我们常说JavaScript是单线程的。 所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个。不妨叫它主线程。 但是实...

    wenyiweb 评论0 收藏0

发表评论

0条评论

macg0406

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<