前端学习笔记之ajax

最新推荐文章于 2024-09-12 14:45:25 发布

a794857535

最新推荐文章于 2024-09-12 14:45:25 发布

阅读量204

点赞数

分类专栏：前端开发文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/a794857535/article/details/53292180

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.什么是ajax

/*AJAX是什么-------------------------------------------------
    AJAX ： 异步 JavaScript and XML
    通俗的讲，AJAX就是JS通过一个网址去加载数据，这个过程通常是用户不可见的。
    传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

    AJAX加载过来的数据，哪些是JS能直接处理的？
    HTML CSS JS TEXT PNG
-----------------------------------------------------------*/
/*AJAX的优势-------------------------------------------------
    异步加载数据，无需切换页面
    更佳的用户体验：局部刷新、及时验证、操作步骤简化等
    节省流量
    JS控制数据的加载，更加灵活多用
-----------------------------------------------------------*/

/*那么AJAX到底如何使用？--------------------------------------
    XMLHttpRequest()可扩展超文本传输请求
    1.创建一个对象
        所有现代浏览器均支持 XMLHttpRequest 对象
        （IE5 和 IE6 使用 ActiveXObject("Microsoft.XMLHTTP")

    2.open(method,url,bol)
        method 参数是用于请求的 HTTP 方法。GET、POST
            POST：用"POST"方式发送数据,可以大到4MB
            用POST需要设置编码格式
            xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');

            GET：用"GET"方式发送数据,只能256KB

        url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。

        bol 如果这个参数是 false，请求是同步的
            如果这个参数是 true 或省略，请求是异步的

    3.send(data)发送请求

    4.onreadystatechange事件 服务器响应
        readyState与status:

        readyState有五种状态：
        　　0 (未初始化)： 
                (XMLHttpRequest)对象已经创建，但还没有调用open()方法；
        　　1 (载入)：
                已经调用open() 方法，但尚未发送请求；
        　　2 (载入完成)： 
                请求已经发送完成；
        　　3 (交互)：
                可以接收到部分响应数据；
        　　4 (完成)
                ：已经接收到了全部数据，并且连接已经关闭。

        如此一来，你应该就能明白readyState的功能，而status实际是一种辅状态判断，只是status更多是服务器方的状态判断。
        关于status，由于它的状态有几十种，我只列出平时常用的几种：
        　　100——客户必须继续发出请求
        　　101——客户要求服务器根据请求转换HTTP协议版本
        　　200——成功
        　　201——提示知道新文件的URL
        　　300——请求的资源可在多处得到
        　　301——删除请求数据
        　　404——没有发现文件、查询或URl
        　　500——服务器产生内部错误


    5.获取数据
        responseText    获得字符串形式的响应数据。
        responseXML 获得 XML 形式的响应数据。

ajax之JSON

JSON的两个方法
    一个是将JSON字符串转换为JavaScript原生值：parse()。
    一个是将原生JavaScript值转换为JSON字符串：stringify()；

    特别注意，键要用双引号 //不是双引号，会报错 <br>
    var str= '[
        {"name" : "a","age" : 1},
        {"name" : "b","age" : 2}
    ]';     

    1.parse()方法把字符串转成JSON格式 
    var json = JSON.parse(str); 
    var json = eval(str);//这种方法既不安全，可能会执行一些恶意代码。<br>            

    2.stringify()方法第一个参数是一个数组，第二个参数是一个函数，第三个参数则表示是否在JSON字符串中保留缩进。
    var str= JSON.stringify(arr,function,num);  //转换成JSON字符串

演示

    //特别注意，key要用双引号 //不是双引号，会报错
    var str = '{"name":"abc","age":"18"}';
    //字符串转json 
    var json = JSON.parse(str);
    // console.log(json.name);
    //json转字符串
    // var str2 = JSON.stringify(json);
    //json转字符串 在json里面添加文字
    var str2 = JSON.stringify(json,function(key,value){
        // console.log(key,value);
        //循环json的key
        switch(key){
            //如果是name
            case 'name':
            return "姓名:"+value;//返回 key的value值
            case 'age':
            return "年龄:"+value;//返回 key的value值
            //默认返回自己本身'{"name":"abc","age":"18"}'
            default:return value;
        }
    },2);//首行缩进 两个字符
    console.log(str2);

二.XML

XML 被设计用来传输和存储数据。
HTML 被设计用来显示数据。
XML和JSON都使用结构化方法来标记数据.

什么是 XML
XML 指可扩展标记语言（EXtensible Markup Language）
XML 是一种标记语言，很类似 HTML
XML 的设计宗旨是传输数据，而非显示数据
XML 标签没有被预定义。您需要自行定义标签。
XML 被设计为具有自我描述性。
XML 是 W3C 的推荐标准

XML:
    <?xml version="1.0" encoding="utf-8"?>
    <province>
            <name>广东</name>
            <cities>
                <city>广州</city>
                <city>深圳</city>
                <city>珠海</city>
            </cities>
    </province>
JSON:
    province = {
        "name": "广东",
        "cities": {
            "city": ["广州", "深圳", "珠海"]
    }

三.获取数据 XML

html部分

    <h3>1</h3>
    <ul>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <button>获取数据</button>

javascript部分

    var btn = document.querySelector("button");
    var h3 = document.querySelector("h3");
    var li = document.querySelectorAll('li');
    //创建ajax对象
    var xmlhttp = new XMLHttpRequest();
    //点击按钮是执行ajax请求
    btn.onclick = function(){
        //打开("传输方式","url")
        xmlhttp.open("GET","xml.xml");
        xmlhttp.send();
    }
    //  等待xmlhttp加载完成
    // xmlhttp.onload = function () {
    //  console.log(xmlhttp.responseXML);
    // }
    //根据状态码检测请求的数据是否加载完成
    xmlhttp.onreadystatechange = function(){
        console.log(xmlhttp.readyState);
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            // console.log(xmlhttp.responseXML);
            //获得 XML 形式的响应数据
            var xml = xmlhttp.responseXML;
            //把xml的name 赋值给name
            var name = xml.querySelector("name");
            //把citys的name 赋值给city
            var citys = xml.querySelectorAll("city");
            h3.innerHTML = name.innerHTML;//h3=name.innerHTML
            for (var i = 0; i < li.length; i++) {
                //li[i]=citys[i].innerHTML
                li[i].innerHTML = citys[i].innerHTML;
            }
        }
    }

XML部分

<?xml version="1.0" encoding="utf-8"?>
<country>
    <province>
        <name>广东5</name>
        <cities>
            <city>广州2</city>
            <city>深圳3</city>
            <city>珠海4</city>
        </cities>
    </province>
</country>

四.获取数据 GET

html部分

    姓名：<h3>？</h3>
    年龄：<p>？</p>
    <button>获取数据</button>

javascript部分

        var h3 = document.querySelector('h3');
    var p = document.querySelector('p');
    var btn = document.querySelector('button');
    //创建一个ajax对象
    var xmlhttp = new XMLHttpRequest();
    //点击按钮是执行ajax请求
    btn.onclick=function(){
        //打开("传输方式","url")
        xmlhttp.open("GET","get.php?name=kkk&age=123");
        xmlhttp.send();//请求发送
    //应用封装好的ajax函数
    // ajax("GET","get.php",{name:"abc",age:18},function (data) {
    //  var json=JSON.parse(data);
    //      h3.innerHTML= json.name;
    //      p.innerHTML= json.age;
    //  })
    }
    //服务器响应 他会改变readyState和status
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4&&xmlhttp.status==200) {
            获得字符串形式的响应数据转为json
            var json=JSON.parse(xmlhttp.responseText);
            //把json.name赋给h3.innerHTML
            h3.innerHTML= json.name;
            //把json.age赋给p.innerHTML
            p.innerHTML= json.age;
        }
    }

PHP部分

    $name = $_GET["name"];//$_GET获取name
    $age = $_GET["age"];//$_GET获取age
    //'{"name":"'.获取的name.'","age":"'.获取的age.'"}';
    $str = '{"name":"'.$name.'","age":"'.$age.'"}';
    //输出字符串 才能获取
    echo $str;

五.获取数据 POST

    姓名：<h3>？</h3>
    年龄：<p>？</p>
    <button>获取数据</button>

javascript部分

    var h3 = document.querySelector('h3');
    var p = document.querySelector('p');
    var btn = document.querySelector('button');
    //创建一个ajax对象    
    var xmlhttp = new XMLHttpRequest();//XMLHttpRequest可扩展超文本传输请求
    //鼠标点击
    btn.onclick=function(){
        //打开open(传输方式,传输地址,bol false，请求是同步的 ture是异步交互 默认是ture)
        xmlhttp.open("POST","post.php");
        //post请求传输数据根据设置请求头,就是声明数据格式
        xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        xmlhttp.send("name=abc&age=123");//发送数据请求
    }
    //服务器响应 他会改变readyState和status
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4&&xmlhttp.status==200) {
            //获得字符串形式的响应数据转为json
            var json=JSON.parse(xmlhttp.responseText);
            h3.innerHTML= json.name;
            p.innerHTML= json.age;
        }
    }

PHP部分

    $name = $_POST["name"];//$_POST获取name
    $age = $_POST["age"];//$_POST获取age
    //'{"name":"'.获取的name.'","age":"'.获取的age.'"}';
    $str = '{"name":"'.$name.'","age":"'.$age.'"}';
    //输出字符串 才能获取
    echo $str;

六封装(重点)

        //ajax封装函数
        function ajax(method,url,json,cd){
        //判断window有没有XMLHttpRequest
        if (window.XMLHttpRequest) {
            //有就创建new XMLHttpRequest()
            var xmlhttp=new XMLHttpRequest();
        }else{
            //没有就创建new ActiveXObject("Microsoft.XMLHTTP")
            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //创建空数组
        var arr=[];
        /*json{name:"abc",age:18}
            循环json里面的key key=name和age*/
        for(var key in json){
            /*循环出key=name拼接"="拼接json[name]=name里面的abc 
            因为里面是字符串 不能使用json.name 要使用json[name]
            */
            var str =key+"="+json[key];
            //把str/push进arr数组里面
            arr.push(str);
        }
        //把数组里面的name=abc,age=18的逗号变成&拼接 
        var str=arr.join("&")//str变成"name=abc&age=18"
        //判断传输方式
        if (method=="GET") {
            //xmlhttp.open(GET传输方式,url)
            xmlhttp.open("GET",url+"?"+str);//打开
            xmlhttp.send()//发送请求
        }else{
            //xmlhttp.open(POST传输方式,url)
            xmlhttp.open("POST",url);//打开
            //用POST需要设置编码格式 GET不需要
            xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            xmlhttp.send(str);//POST 需要在发送请求(传进需要传进的参数)
        }
        /*根据状态码检测请求的数据是否加载完成
        服务器响应 他会改变readyState和status
        */
        xmlhttp.onreadystatechange=function(){
            //xmlhttp.readyState=4(客户完成)  xmlhttp.statu(服务器完成)
            if (xmlhttp.readyState==4&&xmlhttp.status==200) {
                //responseText获得字符串形式的响应数据
                cd(xmlhttp.responseText);
        }
    }
}

七.连接数据库

html部分

    <button>数据库获取数据</button>
    <table border="1">  
    </table>

javascript部分

var btn = document.querySelector('button');
var table = document.querySelector('table');
btn.onclick = function () {
    //调用ajax用GET获取get_sql.php 里面的数据
    ajax("GET","get_sql.php",{},function(data){
        //获取PHP输出的字符串 转化为JSON
        var arr= JSON.parse(data);
        //变成arr{[id:"1",name:"jj",con:"xxxx"]}
        console.log(JSON.parse(data));
        //定义空的字符串
        var str= "";
        for (var i = 0; i < arr.length; i++) {
            //json里面的 第几个的ID  第几个的名 第几个的内容
            str +="<tr><td>"+arr[i].id+"</td><td>"+arr[i].name+"</td><td>"+arr[i].con+"</td></tr>"
        }
        //table里面的HTML等于str
        table.innerHTML = str;
    })
}

php部分

    //连接数据库 
    $conn = mysqli_connect("127.0.0.1","root","","html5");
    //设置PHP操作数据库数据的编码格式
    $conn->query("set names utf8");
    //执行sql语句
    $result=$conn->query($sql = "SELECT * FROM msg");
    //定义一个数组
    $arr = array();
    // while ($arr= $result->fetch_assoc()) {
    /// echo "<tr>
    //      <td>{$arr['id']}</td>
    //      <td>{$arr['name']}</td>
    //      <td>{$arr['con']}</td>
    //  </tr>";
    // }
    // print_r($result);
    //每循环一次 把里面的数据拿一条出来 直到拿到里面没数据为止
    while ($row= $result->fetch_assoc()) {
        $arr[]=$row;//拿出来的东西 赋进去
    }
    //print_r($arr);
    //PHP数组 变成json
    $json = json_encode($arr);
    //输出字符串
    echo "$json";
    //PHP json 转数组
    // $arr2 = json_decode($json);
    // print_r($arr2);

a794857535

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记之ajax

一.什么是ajax/*AJAX是什么------------------------------------------------- AJAX ：异步 JavaScript and XML 通俗的讲，AJAX就是JS通过一个网址去加载数据，这个过程通常是用户不可见的。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。 AJAX加载过来的数据，哪些
复制链接

扫一扫