在Html5中与服务器交互

转自原文 在Html5中与服务器交互

 

刚刚涉足职场，上头就要我研究HTML5,内嵌到手机上，这对我来说完全是一个陌生的领域，不过也正好给自己一个机会来学习，最近做到要跟服务器交互这部分，这部分可是卡了很久，不过最终还是解决了。下面介绍两种方法：

• ajax
• Cordova Http

---

首先要说明一点，如果是在PC端上进行交互的话，这就是跨域问题，需要服务器那边进行一些修改，否则的话是不能访问的。我一开始也是在PC端上测试的，所以这个问题一直卡了很久，原来只要内嵌到手机上就不存在跨域问题了，真蛋疼~，所以我介绍的两张方法都是基于内嵌到手机上的，要注意了！

ajax及使用

如果是用原生态的ajax写访问的话，就比较麻烦，所以这次我用的是jQuery封装好的ajax，先上代码：

$.ajax({
        type:"GET",
        url:"***",
        dataType:"json",
        data:{
            appId:"",
            passportCode:"*******",
            clientTye:"android",
        },
        success:function(data){
            alert("访问成功" + JSON.stringify(data));
        },
        error:function(jqXHR){
            alert("发生错误" + jqXHR.status);
        }
    });

这里面有好几个字段，这几个字段的意思是：

字段	描述
type	指明是get操作还是post操作
url	要访问的地址，就是服务器提供的接口
dataType	服务器预期返回的数据格式，如(xml,json,html)
data	参数
success	访问成功时的回调函数
error	访问失败时的回调函数

补充说一下：success:function(data,textStatus,jqXHR)这三个参数是可选的，我习惯就只带一个参数，就是data。这个返回的data已经是json对象来的，可以直接解析的。假如返回的是
{
result:0,
description : ””,
hasNewVersion : ””,
verson: “”,
url：““,
clientType:““ ,
updateDesc：““ ,
updateTime：““ ,
mustUpdate:””
}，
那么data.result就是0了，是不是觉得很方便呢。效果图：

Cordova Http

这种方法是要基于你的项目是cordova项目。这里稍微说两句，cordova前身是phoneGap，其实两者是一样的，都是移动web的开发框架，有兴趣的可以去了解一下！由于这篇文章(Cordova环境安装配置 )主要是讲如何使用这个插件，环境搭建的就不说了。

• 安装插件
  在命令行里面进入到自己的项目里面：
  
  点击回车，等待一会就可以了，再打开自己的项目的plugins，就可以看到cordova-plugin-http这个文件，证明插件安装成功了！
  

• 使用

cordovaHTTP.post("url地址", {
            appId:"",
            phone:"",
            password:"",
            clientTye:"web", //参数
        }, {//这个我基本一直都是空的}, 
        function(response) { //成功回调的函数
            // prints 200
          alert(response.status + "访问成功" + "\n返回的json数据     为：" + response.data);
            try {
                //转化为json对象
                var jsonbj = JSON.parse(response.data);
            } catch(e) {
                console.error("JSON parsing error");
            }
        }, function(response) { //失败回调的函数
            // prints 403
            alert("访问失败" + response.status + "、" + response.data);
            //prints Permission denied
            console.log(response.error);
        });

 

这个也没什么好说的，看完之后也明白的了。
具体请参考[https://github.com/wymsee/cordova-HTTP][2].

其实这个难度也不是很大的，只要看一下就知道怎样用了，希望对大家和对自己也有用！