• JavaScript的原生Ajax解析

    通过JavaScript的Ajax进行详细的解析过程，从而更好的了解Jquery的Ajax。

    顺带，我会在后面把我整理的一整套CSS3，PHP,MYSQL的开发的笔记打包放到百度云，有需要可以直接去百度云下载，这样以后你们开发就可以直接翻笔记不用百度搜那么麻烦了。

     笔记链接：http://pan.baidu.com/s/1qYdQdKK 密码：pvj2

     

    一、JavaScript原生ajax
    1.原生ajax代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    window.onload=function(){
    var oBtn = document.getElementById("btn");
    oBtn.onclick=function(){
    //打开浏览器
    /*
    1.创建一个ajax对象
    ie6以下 ActiveXObject('Microsoft.XMLHTTP')
    */
    var xhr = null;
    // window属性下的XMLHttpRequest 是否存在 不存在就执行else 存在就直接执行，为的是兼容IE6
    /*  if(window.XMLHttpRequest){
    var xhr = new XMLHttpRequest();
    }else{
    var xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }*/
    // 最好用下面的方法考虑兼容
    try{
    // 代码尝试执行这个块中的内容，如果有错误，则执行catch{},并且传入错误信息
    var xhr = new XMLHttpRequest();
    }catch(e){
    var xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    // 在地址栏输入地址
    /*
    open()方法   
    */
    xhr.open('get','1.txt',true);
    // 提交
    xhr.send();
    // 等待服务器返回内容
    xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
    alert(xhr.responseText);
    }
    }
    }
    }

    　　

    html:

    1 <input type="button" value="按钮" id="btn">

    　　

    2.表单
    　　表单:数据的提交
    　　action : 数据提交的地址，默认是当前页面
    　　method : 数据提交的方式，默认是get方式

    1.get
    　　把数据名称和数据值用=连接，如果有多个的话，那么它会把
    　　多个数据组合用&进行连接，然后把数据放到url?后面传到指定页面

    　　url长度限制的原因，我们不能通过get方式传递过多的数据

    2.post
    理论上无限制

    1
    2
    3
    4
    5
    6
    7
    enctype : 提交的数据格式，默认application/x-www-form-urlencoded
    <form action="" method="">
    <input type="text" name="user">
    <input type="text" name="age">
    <input type="submit" value="提交">
    </form>

    　　

    3. open()方法
    　　代码：xhr.open('get','1.txt',true);
    参数
    　　1.打开方式
    　　2.地址
    　　3.是否异步[true为异步，false为同步]
    异步：非阻塞 [前面的代码不会影响后面的代码执行]
    同步：阻塞 [前面的代码会影响后面的代码执行]
    阻塞：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <script src="jquery.js"></script>
    $(function(){}) //如果Jque.js没有引用下面的文件执行也不得用，就阻塞了
    非阻塞：
    setTimeout(function(){
    alert(1);
    },2000);
    alert(2);
    // 弹出2不会对我有影响，就非阻塞

    　　

    同步和异步区别：
    　　当你后续的代码需要用到前面的东西的时候，你可以用同步，但异步用的多


    4. send()发送请求
    　　xhr.send();

    5.请求状态监控

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    onreadystatechange事件
    ・readyState属性：请求状态
    -0（初始化）还没有调用open()方法
    -1（载入）已调用send()方法，正在发送请求
    -2（载入完成）send()方法完成，已收到全部响应内容
    -3（解析）正在解析响应内容
    -4（完成）响应内容解析完成，可以在客户端用了
    ・status属性：服务器（请求资源）的状态
    ・返回的内容
    -responseText:返回以文本形式存放的内容
    -reponseXML:返回XML形式的内容
    代码分析：
    // 等待服务器返回内容
    /*
    readyState : ajax工作状态
    responseText : ajax请求返回的内容就被存在这个属性下面
    on readystate change : 当readyState改变的时候触发
    status : 服务器状态 http状态码
    */
    xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
    // 状态值为200 ok的时候
    if(xhr.status == 200){
    alert(xhr.responseText);
    }else{
    alert('出错了，Err:'+xhr.status);
    }
    }
    }

    　　

    6.数据请求和获取源码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    window.onload=function(){
    var oBtn = document.getElementById("btn");
    // 用了setInterval()定时更新数据
    oBtn.onclick=setInterval(function(){
    // 打开浏览器，启用xml请求
    try{
    var xmh = new XMLHttpRequest();
    }catch(e){
    var xmh = new ActiveXObject('Microsoft.XMLHTTP');
    }
    // 在地址栏输入地址
    xmh.open('get','test.php',true);
    // 发送请求
    xmh.send();
    // 等待服务器返回内容
    xmh.onreadystatechange=function(){
    if(xmh.readyState == 4){
    // 以下是关键方法 JSON.parse();
    if(xmh.status == 200){
    // JSON.parse()将 JavaScript 对象表示法 (JSON) 字符串转换为对象
    var data = JSON.parse(xmh.responseText);
    var oUl = document.getElementById("ul1");
    var html = "";
    for(var i=0;i<data.length;i++){
    // 因为是二维数组所以需要这样写[i]['title']
    html += '<li><a href="">'+data[i]['title']+'</a> <span>'+data[i]['date']+'</span></li>'
    }
    oUl.innerHTML = html;
    }else{
    // 弹出status的状态错误
    alert("出错,Err:"+xmh.status);
    }
    // alert(xmh.responseText);
    }
    }
    },1000);
    }

    　　

    后台test.php文件代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <?php
    // 用数组的格式传数据过去
    $arr = array(
    array('title'=>'菠萝的海df,很美','date'=>'2015-6'),
    array('title'=>'菠萝的海d,很美a','date'=>'2015-6'),
    array('title'=>'菠萝的海,很美s','date'=>'2015-6'),
    array('title'=>'菠萝的海d,很美s','date'=>'2015-6'),
    array('title'=>'的海x,很美x','date'=>'2015-6'),
    array('title'=>'菠萝海,很美','date'=>'2015-06'),
    array('title'=>'菠萝的海,很美s','date'=>'2015-6')
    );
    // json_encode 用来把数据转换成json格式
    echo json_encode($arr);
    ？>

    　　



    7.get方法解析
    /*
    1.缓存 在url 后面连接一个随机数，时间戳
    2.乱码 编码encodeURI
    输出中文：+encodeURI('刘伟')+
    */
    // 在地址栏输入地址

    1 xmh.open('get','getNews.php?username='+encodeURI('刘伟')+'&pass=bbb&'+new Date().getTime(),true);

    后台php用$_GET['']方法获取数据

    php代码：

    1
    2
    3
    4
    5
    6
    <?php
    $username = $_GET['username'];
    $pass = $_GET['pass'];
    echo "欢迎,你的名字:{$username},密码:{$pass}";
    ？>

    　　

    8.post方法解析

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /*
    post方式，数据放在send()里面作为参数传递
    */
    // 申明发生的数据编码类型
    xmh.setRequestHeader('content-type','application/x-www-form-urlencoded');
    // post没有缓存问题，get有缓存问题所以需要更新
    // 中文也不用编码 get方式要编码encodeURI
    xmh.send('username=leo&pass=222');

    　　HTML部分：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <li>
    <div>
    <img src="images/1.png" alt="good">
    <p>森今夏浓浓的森女风来袭！柔软舒适的面料，柔和的粉蓝和白色，领口绑带，穿起来仙气十足！</p>
    </div>
    </li>
    <li>
    <div>
    <img src="images/1.png" alt="good">
    <p>森今夏浓浓的森女风来袭！柔软舒适的面料，柔和的粉蓝和白色，领口绑带，穿起来仙气十足！</p>
    </div>
    </li>
    <li>
    <div>
    <img src="images/1.png" alt="good">
    <p>森今夏浓浓的森女风来袭！柔软舒适的面料，柔和的粉蓝和白色，领口绑带，穿起来仙气十足！</p>
    </div>
    </li>
    <li>
    <div>
    <img src="images/1.png" alt="good">
    <p>森今夏浓浓的森女风来袭！柔软舒适的面料，柔和的粉蓝和白色，领口绑带，穿起来仙气十足！</p>
    </div>
    </li>
    <li>
    <div>
    <img src="images/1.png" alt="good">
    <p>森今夏浓浓的森女风来袭！柔软舒适的面料，柔和的粉蓝和白色，领口绑带，穿起来仙气十足！</p>
    </div>
    </li>

    　　
  • 相关阅读:
    编译原理 First集和Follow集的求法
    编译原理——算符优先分析法详解
    api.js(接口文件)
    addmul.wxs（保留两位小数-将手机号中间4位数变成*-处理时间戳）
    插槽的使用
    scroll-view小程序侧边栏（点击加载右侧商品）
    Array.of
    es6解构赋值默认值结合使用
    ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
    es6 数组的新方法 some filter indexOf 展开运算符... let const
  • 原文地址：https://www.cnblogs.com/xieyulin/p/7056104.html
Copyright © 2020-2023  润新知