关于Ajax的详细解读

最新推荐文章于 2024-02-17 13:45:00 发布

奔跑的内马尔

最新推荐文章于 2024-02-17 13:45:00 发布

阅读量115

点赞数 1

本文链接：https://blog.csdn.net/weixin_45924880/article/details/103990901

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // Ajax的简称：A(async异步的)，JA(javascript),X(XMl可拓展标记语言)
        // 它并不是一个新的技术，可以认作是新瓶装老酒
        // ajax技术主要包含四个部分：javascript,css,dom.XMLHttpRequest
        // 核心的是XML，从XMLHttpRequest开始，它负责将用户的信息通过异步的方式上传到服务器
        // 并且结束服务器的响应和数据
        // JavaScript是创建XMlHttpRequest对象，使用该对象的属性和方法，也可以直接操作客户端
        // 可以说它起到了“胶水”的作用
        
        
// 1.使用ajx向服务器发送请求

        // 使用XMLHttpRequest的open()和send()方法
        // XMLHttp.open('get','test1.txt',true);
        // XMLHttp.send();
        //open(method,url,async)  =(请求的类型,url,是否异步处理请求),文件类型可以是任意类型
        //send(string)  将请求发送到服务器,string仅使用post请求
        // 那么是post还是get呢?
            // get与post相比,get更快,并且在大部分都可以使用!!!

            // 那么如此特别的post在哪些情况下使用呢?
            // 1.无法使用缓存文件(因为更新服务器上的文件或者数据库)
            // 2.向服务器发送大量的数据(因为post请求方式没有数据量的限制)
            // 3.发送包含未知字符的用户输入时,post比get更加稳定，更加可靠

            // 为了得到是缓存的结果，请向URL添加一个唯一的ID
            // 如果希望通过get发送请求,请向URL添加地址信息

// 2.如果需要想HTML表单那样post数据,请使用setRequestHeader()来添加http头,
            // 然后在send()方法中规定你所希望发送的数据，语法如下：
            // XMLHttp.open('post','ajax-test.asp','true');
            // XMLHttp.setRequestHeader('content-type','application/x-www-form-urlencoded');
            // XMLHttp.send('这里是你想传输的内容');
            // setRequestHeader(header,value):向请求添加http头
            // Header:规定头的名称
            // value:规定头的值


// 3.关于ajax的异步与同步
            // 通过ajax与javascript无需等待服务器的等待,可以在等待服务器的同时执行其他的脚本
            // javascript会等到服务器响应就绪才继续执行.如果服务器繁忙或者缓慢,应用程序就会挂起或者停止
            // 当使用async = false时,请不要编写onreadystatechange函数,把代码放到send()语句后面即可
            // 用javascript编写一个完整的ajax并不难,但是需要注意,ajax请求是否是异步执行的

// 4.关于服务器的响应
            // 如果需要获得服务器的响应,请使用XMLHttpRequest对象的responseText或者responseXML属性
            // ResponseText:获得字符串形式的数据
            // ResponseXML:获得XML类型的数据


// 5.关于onreadystatechange()事件
            // 当请求事件被发送到服务器的时候,我们需要执行一些基本响应的任务.
            // 每当readystatechange改变时,就会触发onreadystatechange()事件
            // readyState属性存有XMLHttpRequest的状态信息

            // XMLHttpRequest对象有三个属性:
            // 1.onreadyStatechange:存储函数,每当readyState函数改变时,就会触发这个函数
            // 2.readyState:存有XMLHttpRequest的状态,从0-4,分别是:
                // 0:请求未初始化
                // 1.服务器链接已经建立
                // 2.请求已经被接收
                // 3.请求处理中
                // 4.请求已完成,响应已经就绪
            // status:200,'ok';404:未找到页面



// 6.使用callback函数时(回调函数)
            // callback函数是一种以参数形式传递给另一个函数的函数
            // 如果网站存在多个ajax任务时,那么就应该为XMLHttpRequest(服务器响应)创建一个标准的函数,并且为每一个ajax调用这函数
            // 该函数的调用包含URL以及发生变化的onreadyStatechange时执行的的任务(每次调用尽量不经相同),代码如下:

            // function  myFunction (){
            //     loadXMLDoc('ajax-info.txt',function(){
            //         if(XMLHttp.readyState==4&XMlHttp.status==200){
            //             // readyState表示请求已经完成,等待响应
            //             // status为200表示未找到网页
            //             document.getElementById('myDiv').innerHTML=XMlHttp.responseText;

            //         }
            //     })
            // }
// 7.jQuery-ajax-ajax()的方法
                    // $(document).ready(function(){
                    //     $('#b01').click(function(){
                    //         htmlobj = $.ajax({url:"jquery/test1.txt",async:false});
                    //         $("#myDiv").html(html(htmlobj.responseText));
                    //     });
                    // });
                    // <div id="myDiv"><h2>Let AJAX change this text</h2></div>
                    // <button id="b01" type ="button">Change Context</button>

                    // 定义和方法:
                            // 它是通过http请求加载远程数据
                            // 这是jquery底层ajax实现的
                            // $.ajax()返回的的XMLHttpRequest对象，大多是不需要操作这个对象，除非搞些骚操作，获得更多的灵活性
                            // 最简单的情况是，$.ajax()可以不带任何的参数直接使用
                            // 注意：所以的选项都可以使用$.ajaxSetup()函数来布局设置
                            // 语法：
                            // jQuery.ajax([settings])
                            // settings参数：配置ajax请求的的键值对的集合，可以通过$.ajaxSetup()设置任何选项的默认值







    </script>
</body>

</html>

奔跑的内马尔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Ajax的详细解读

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫