js的几种交互模式

1. WebSocket 

 https://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/

2. Jsonp

(JSONwith Padding)是资料格式json的一种“使用模式”，可以让网页从别的网域获取资料

 

<scripttype="text/javascript">

functionupdatePage(result, methodName)

{

varhtml = '<ul>';

……

document.getElementById('city').innerHTML= html;

}

functiongetInfo()

{

varurl = ".....";

varscript = document.createElement('script');

  script.setAttribute('src',url);

  document.getElementById("loadjs").innerHTML= "";

  document.getElementById("loadjs").appendChild(script);

}

getInfo();

</script>

<divid="city"></div>

<divid="loadjs"></div>

3. AJAX

即“AsynchronousJavaScript and XML”（异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。

 <script>

               functioncreate() {

                   try

                   {

                       //Firefox, Opera 8.0+, Safari

                       xmlHttp= new XMLHttpRequest();

                   }

                   catch(e)

                   {

                       //Internet Explorer

                       try

                       {

                           xmlHttp= new ActiveXObject("Msxml2.XMLHTTP");

                       }

                       catch(e)

                       {

                           xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");

                       }

                   }

                   returnxmlHttp;

               }

               

               varxmlHttp = create();

               getInfo();

               

               functionupdatePage()

               {

                   if(xmlHttp.readyState === 4) {

                                              

                        ……

                        document.getElementById("city").innerHTML=html;

                   }

               }

               functiongetInfo() {

                   varurl = "......;

                   xmlHttp.open("GET",url, true);//这里的true代表是异步请求

                   xmlHttp.onreadystatechange= updatePage;

                   xmlHttp.send(null);

               }

               

               

           </script>          

<div id="city"></div>