原生ajax-异步交互

标签: ajax
7人阅读 评论(0) 收藏 举报
分类:
实现ajax异步交互步骤:
创建XMLHttpRequest核心对象
function getXhr(){
            var xhr = null;

            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }

与服务器端建立连接
使用XMLHttpRequest对象的open(method,url)方法
method - 设置当前请求的类型
url - 设置当前请求的地址
(如果是post方法需要设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');)
向服务器端发送请求
使用XMLHttpRequest对象的send(请求参数)方法
请求参数的格式 - key=value
接受服务器端的响应数据
使用XMLHttpRequest对象的onreadystatechange事件
监听服务器端的通信状态
使用XMLHttpRequest对象的readyState属性,判断服务器端当前的状态(0-4)

使用XMLHttpRequest对象的status属性,判断服务器端当前的状态码(200)


     ajax中的XML格式
请求的数据格式 - XML
 客户端如何构建符合XML格式的数据
   构建的数据类型 - 字符串(string)类型
   字符串的内容符合XML格式的语法要求
 服务器端如何接受符合XML格式的数据
   接受客户端的请求数据 - 字符串(string)类型
   PHP集成了DOM的相关内容
DOMDocument类
DOMElement类
DOMNode类

响应的数据格式 - XML


下面是一个原生Ajax实现二级联动的例子

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xml的二级联动</title>
</head>
<body>
    <select id="province">
        <option>请选择</option>
        <option>山东省</option>
        <option>广东省</option>
        <option>辽宁省</option>
        <option>吉林省</option>
    </select>
    <select id="city">
        <option>请选择</option>
    </select>

    <script type="text/javascript">
        var Oprovince = document.getElementById('province');
        var Acity = document.getElementById('city');

        Oprovince.onchange= function(){
            var options = Acity.getElementsByTagName('option');
            for(var j = options.length-1;j>0;j--){
                Acity.removeChild(options[j]);
            }

            if(Oprovince.value!='请选择'){
                var xhr = getXhr();

                xhr.open("post","10.php");
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.send('pro='+Oprovince.value);

                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4 && xhr.status == 200){
                        var xmlDOC = xhr.responseXML;


                            var cities = xmlDOC.getElementsByTagName('city');
                            for(var i=0;i<cities.length;i++){
                                var city = cities[i].getAttribute('name');

                                var opts = document.createElement('option');
                                var txt = document.createTextNode(city);
                                opts.appendChild(txt);
                                Acity.appendChild(opts);
                            }
                    }
                }
            }

        }
        function getXhr(){
            var xhr = null;

            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }
    </script>
</body>
</html>

ajax.php

<?php
    $pro = $_POST['pro'];

    header('Content-Type:text/xml');

    switch($pro){
        case "山东省" :
        // 手工构建
            echo "<cities><city name='1' /><city name='2' /><city name='3' /></cities>";
            break;
        case "辽宁省" :
            echo "<cities><city name='4' /><city name='5' /><city name='6' /></cities>";
            break;
        case "吉林省" :
            echo "<cities><city name='7' /><city name='8' /><city name='9' /></cities>";
            break;
        case "广东省" :
            echo "<cities><city name='0' /><city name='0' /><city name='8' /></cities>";
            break;
    }
?>
    一个京东订单页面的例子和原生ajax的小例子和笔记,欢迎参考:https://github.com/harrietjia/ajax
查看评论

Ajax异步数据交互

本课程属于JavaScript高级编程技术,所以在学习此技术之前一定要先掌握JavaScript与WEB开发技术后才可以进行学习。官方QQ群:612148723。
  • 2016年12月31日 23:30

JS与原生OC的三种交互方式

JS与原生OC的三种交互方式大家在做项目的时候应该也遇到过需要h5与OC之间通信,来实现某种特定的效果,于是我总结一下最近用到过的这两者之间的交互的方式: 通过在UIWebView的代理方法里拦截UR...
  • cljAndPean
  • cljAndPean
  • 2017-03-26 16:27:01
  • 1964

cordova与ios native code交互的原理

iOS平台cordova原理总结
  • kyfxbl
  • kyfxbl
  • 2014-08-06 18:00:57
  • 5012

浏览器与服务器的交互原理解析(四)-------使用vue-resource进行异步请求

vue相对于jquery和原生js来说, 通过产生虚拟DOM, 将前端攻城狮从原来繁琐的DOM操作中解放出来, 相应的, ajax基于对DOM节点的操作,进行数据请求的方式在vue中就被弃用了. 转而...
  • weixin_41144066
  • weixin_41144066
  • 2018-01-10 16:47:18
  • 129

React-Native 与原生的3种交互通信(Android)

React-Native与原生(Android)的交互通信
  • asddavid
  • asddavid
  • 2016-11-28 10:26:37
  • 10221

JS与Android原生交互

JS与Android原生交互 在项目的开发中我们会遇到android 原生与Html5的混合开发,我们可能会需要在android中调用js里面的方法进行数据交互或其他的特殊处理,又或者在Html页面...
  • u013279462
  • u013279462
  • 2017-05-19 10:47:47
  • 373

android原生和H5交互

最近在左一个Android原生的H5混合开发的APP,之前还没有好好的总结一下 Android原生 和 H5 之间交互的方法,这里来总结一下: 1、hybrid通信,主要就是前端的js和我们Andr...
  • ManYiZilin
  • ManYiZilin
  • 2017-04-05 15:33:47
  • 5342

Android原生与H5交互的实现

随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求。原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝、美团等。下面,结合我本人的开发经验,简单谈一下对混合开...
  • so_huangbo
  • so_huangbo
  • 2017-02-17 20:39:48
  • 11946

iOS原生与H5交互开发

参考链接:iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码)iOS与HTML5交互方法总结浅谈UIWebView,HTML5与Native的混合开发iOS 开发之 原生+html5混合...
  • ws1352864983
  • ws1352864983
  • 2017-04-20 10:51:45
  • 1483

浅谈自己对异步交互、同步交互的理解

浅谈自己对异步交互、同步交互的理解;angular;promise
  • Fiona_lms
  • Fiona_lms
  • 2016-12-27 10:10:17
  • 1348
    个人资料
    持之以恒
    等级:
    访问量: 1532
    积分: 176
    排名: 103万+
    文章存档