AJAX异步请求

时间  2019-12-06
标签 ajax 异步 请求 栏目 Ajax 繁體版
原文   原文链接

原生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: <script src="./jquery.min.js"></script>

  • 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请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jquery-ajax发送post请求</title>
</head>
<body>
 
<div>Ajax无刷新评论</div>
<ul>
    <li>姓名：<input type="text" id="input_name" /></li>
    <li>评论：<input type="text" id="input_comment" /></li>
</ul>
<input type="button" value="发表评论" />
<table border="1"></table>
 
<script src="./jquery.min.js"></script>
<script>
// 1.使用$.post()方法发送post请求，与$.get()用法相同
// $(function(){
//     $.post("./comment.php", {name:'tom',age:23}, function(msg){
//         alert(msg.name + " " + msg.age);
//     }, "json");
// });
 
// 2.使用全局ajax参数发送post请求
$(function(){
    // 设置全局ajax
    $.ajaxSetup({
        url:"./comment.php",
        type:"POST",
        dataType:"json",
        success:comment_add
    });
    // 添加按钮单击事件
    $(":button").click(comment_send);
    // 得到默认数据
    $.ajax();
});
 
function comment_send(){
    var name = $("#input_name").val();
    var comment = $("#input_comment").val();
    // 提交与获取数据
    $.ajax({data:{name:name,comment:comment}});
}
 
function comment_add(data){
    html = "<tr><td>" + data.name + "</td><td>" + data.comment + "</td></tr>";
    $("table").append(html);
}
</script>
</body>
</html>

jQuery-ajax&php跨域请求问题

  • 第一种方法JSONP

注意：JSONP只支持get请求php

1.首先在jquery-ajax配置参数中添加这两项

dataType: "jsonp",
    jsonp: "callback",

例如html

$.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以上，只须要服务端接口加上如下头信息node

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示例jquery

<?xml version="1.0" encoding="UTF-8" ?>
<students>
    <student>
        <name>wendy</name>
        <age>35</age>
        <addr>Santa Fe</addr>
    </student>
    <student>
        <name>Yaphet</name>
        <age>32</age>
        <addr>Balchik</addr>
    </student>
    <student>
        <name>Isaiah</name>
        <age>35</age>
        <addr>Caldera</addr>
    </student>
</students>

js示例ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Ajax获取XML信息</title>
    <script>
        function f1(){
            // 建立Ajax对象
            var obj = new XMLHttpRequest();
            // 感知Ajax状态
 
            obj.onreadystatechange = function(){
                if (obj.readyState == 4 && obj.status == 200) {
                    // 获取XMLDocument对象
                    var xmlobj = obj.responseXML;
                    // 获取xml对象的第一个元素结点students
                    var students = xmlobj.childNodes[0];
                    // 获取元素结点students下全部的student的结点
                    var student = students.getElementsByTagName('student');
                    // 遍历student结点,并得到具体信息
                    var info = "";
                    for (var i = 0; i < student.length; i++) {
                        var name = student[i].getElementsByTagName('name')[0].firstChild.nodeValue;
                        var addr = student[i].getElementsByTagName('addr')[0].firstChild.nodeValue;
                        var age = student[i].getElementsByTagName('age')[0].firstChild.nodeValue;
                        // 拼接输出信息字符串
                        info += "姓名：" + name + "，地址：" + addr + "，年龄：" + age + "<br />";
                    }
                    // 将字符串写入到id名称为result的div字符串中
                    document.getElementById('result').innerHTML = info;
                }
            }
 
            // 建立一个http请求，并设置“请求地址”
            obj.open("get", "./test.xml");
            //发送请求
            obj.send();
        }
    </script>
</head>
<body>
    <h2>Ajax获取XML信息</h2>
    <div id="result"></div>
    <input type="button" onclick="f1();" value="触发" />
</body>
</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程