ajax第三天

最新推荐文章于 2024-09-15 19:20:58 发布

精灵涂

最新推荐文章于 2024-09-15 19:20:58 发布

阅读量243

点赞数 2

分类专栏：前端编程 php ajax 文章标签： ajax

本文链接：https://blog.csdn.net/u014782507/article/details/53148266

版权

前端同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

编程

2 篇文章 0 订阅

订阅专栏

php

2 篇文章 0 订阅

订阅专栏

AJAX第三天

AJAX中的get请求

xhr.open('get','8-4.php?name=zhangsan');
AJAX模拟表单提交的get请求将数据绑在地址里面,所以send()方法里面带的数据是发送不到服务器的,get方式不需要请求头,post必须要传请求头.指定send里面发送的内容的MIME类型

xhr.send(null);//post不传null

xml

xml数据的接收要用responseXml
demo:xml.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xml传数据</title>
</head>
<body>
    <div class="contain"></div>
    <script>
        //获取XMLHttpRequest对象
        var xhr  = new XMLHttpRequest();
        //设置请求行
        xhr.open("get","./xml.php?name=xiaoming&age=12");
        //设置消息体
        xhr.send();
        //监听响应
        xhr.onreadystatechange = function () {
            //接到响应,状态OK
            if (xhr.readyState==4&&xhr.status==200) {
                //拿到响应
                var xmlDate = xhr.responseXML;
                //test:在控制台拿到数据
                // console.log(xmlDate);
                //将拿具体数据
                // document.selectElementsByTagName();
                var name = xmlDate.querySelector("name").innerHTML;
                // test:name有值
                // console.log(name);
                // 创建页面元素
                var span = document.createElement("span");
                // test:span创建成功
                // console.log(span);
                span.innerHTML = name;
                //获取contain容器
                var contain = document.querySelector(".contain");
                //test:contain存在
                // console.log(contain);
                //想容器添加span
                contain.appendChild(span);
            }
        }
    </script>
</body>
</html>

xml.php

<?php
    //设置格式以防乱码
    header('Content-Type: text/xml; charset=utf-8');
    // 理论这一步应该是从数据库取出的，然后后端人员将数据转成xml格式
    $result = file_get_contents('./xml.xml');
    echo $result;
?>

xml.xml

<?xml version="1.0" encoding="UTF-8"?>
<html>
    <body>
        <name>itcast</name>
        <age>18</age>
    </body>
</html>

json

json数据的格式

{
    "name":"xiaoming",
    "age":10
}
//或者
[
    {
        "name":"xiaoming",
        "age":10
    },
    {
        "name":"xiaoming",
        "age":10
    }
]

js对象转json

var obj = {
    name:"xiaoming",
    age :10
}
JSON.stringify(obj);//类型String

json转js对象

json ='{"name":"xiaoming"}';
JSON.parse(json);

php对象转json

$arr = array("name"=>"xiaoming");
json_encode($arr);

ie兼容
json转php对象

json ='{"name":"xiaoming"}';
json_decode(json);

自定义AJAX DEMO

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>封装一个自定义的ajax工具函数</title>
</head>
<body>
    <script>
    // ====================请求数据===================
    //定义options变量
    var options = {
        "type" :"post",
        "url"  :"./ajax.php",
        "data" :{"name":"xiaofang","age":12},
        success:function(ajaxMsg){
            console.log(ajaxMsg);
        }
    };
    var options2 = {
        "type" :"get",
        "url"  :"./ajax.php",
        "data" :{"name":"xiaofang","age":12},
        success:function(ajaxMsg){
            console.log(ajaxMsg);
        }
    };
    // console.log(options);//test:true
    // ======================自定义AJAX===================
    var $ ={
        //定义json字符串编码函数
        params:function(data){
            //初始化字符串
            var o = "";
            //取值
            for(var key in data){
                //拼接
                o += key + "=" + data[key]+"&";
            }
            //删除末端符号"&"
            o = o.slice(0,-1);
            // console.log(o);//test:true
            return o;
        },
        //定义ajax函数
        ajax:function (options) {
            //new XMLHttpRequest
            var xhr = new XMLHttpRequest;
            // console.log(xhr);//test:true
            // 处理options.data
            var data = this.params(options.data);
            //请求行
            if (options.type=="post") {
                //请求行
                xhr.open(options.type,options.url);
                //请求头
                //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                //消息体
                // xhr.send("name=xiaoming&age=12");//test:true
                xhr.send(data);
                //响应
                xhr.onreadystatechange = function () {
                    if (xhr.readyState==4&&xhr.status==200) {
                        //拿到响应体
                        var ajaxMsg = xhr.responseText;
                        // console.log(ajaxMsg);//test:true
                        options.success(ajaxMsg);
                    }
                };
            }else if (options.type=="get") {
                //请求行
                xhr.open(options.type,options.url+"?"+data);
                //触发
                xhr.send(null);
                //响应
                xhr.onreadystatechange = function () {
                    if (xhr.readyState==4&&xhr.status==200) {
                        //拿到响应体
                        var ajaxMsg = xhr.responseText;
                        // console.log(ajaxMsg);//test:true
                        options.success(ajaxMsg);
                    }
                };
            }else {
                alert("请求行错误!");
            }

        }
    }
    $.ajax(options);//test:true
    $.ajax(options2);//test:true
    // // ===================test:post======================
    //  //new XMLHttpRequest
    //  var xhr = new XMLHttpRequest;
    //  // console.log(xhr);//test:true
    //  //请求行
    //  xhr.open("post","./ajax.php");
    //  //请求头
    //  //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //  //消息体
    //  // xhr.send("name=xiaoming&age=12");//test:true
    //  xhr.send("name=xiaoming&age=12");
    //  //响应
    //  xhr.onreadystatechange = function () {
    //      if (xhr.readyState==4&&xhr.status==200) {
    //          //拿到响应体
    //          var ajaxMsg = xhr.responseText;
    //          // console.log(ajaxMsg);//test:true
    //      }
    //  };
    // //=====================test:get=======================
    //  //new XMLHttpRequest
    //  var xhr = new XMLHttpRequest;
    //  // console.log(xhr);//test:true
    //  //请求行
    //  xhr.open("get","./ajax.php?name=xiaohong&age=12");
    //  //触发
    //  xhr.send(null);//test:true
    //  //接收
    //  xhr.onreadystatechange = function(){
    //      if (xhr.readyState==4&&xhr.status==200) {
    //          //取内容
    //          var ajaxMsg = xhr.responseText;
    //          // console.log(ajaxMsg);//test:true
    //      }
    //  };

    </script>

</body>
</html>

ajax.php

<?php
    $result = file_get_contents('./ajax.json');
    switch (true) {
        case $_POST!=null&&$_GET==null:
            echo $result;
            break;
        case $_POST==null&&$_GET!=null:
            echo $result;
            break;
        case $_POST!=null&&$_GET!=null:
            echo $result;
            break;
        default:
            echo '请求行不正确';
            break;
    }
?>

ajax.json

[
    {
        "name": "王力宏",
        "photo": "./images/wlh.jpg",
        "ablum": "<<改变自已>>",
        "age": 39,
        "sex": "男"
    }
]

引插件

ps:小记
命名空间解决变量的全局污染
location.pathname不懂
ctrl+h是替换的sublime快捷键
谁调用this就指向谁&.ajax(this);//this指向&
jQuery:1.7或1.8比较稳定,兼容性比较好
IE5,IE6在自己电脑上装虚拟机
IE8:win7//现在基本使用的
浏览器市场份额百度数据统计
为什么不能用return