码迷,mamicode.com
首页 > 其他好文 > 详细

请求后台数据的几种方式

时间:2017-10-28 22:03:57      阅读:308      评论:0      收藏:0      [点我收藏+]

标签:wro   button   orb   定义   ring   sas   console   常见   授权   

//原生方法 Ajax

  封装:整理一段代码块,把变化的东西抽取为参数(形参)

 请求方式(get  post)

 请求的路径(url)

 参数条件    参数名=值&参数名=值

 是否异步   true false

 异步请求的目的:拿到数据

 处理数据的方式(会话失败)  success   函数定义   都有一个形参           数据

 会话失败                                     error     函数定义 都有一个形参            会话的状态    404  500

 

 参数:对象 o={

 method:"get"   //"post"  请求方式             string

 url:"http://xxx.xxx.xx:80/xxx.php" string

 isAsyc:true     //false            boolean

 //data: "参数名&值"

 data:{参数名:值,参数名:值,参数名:值,参数名:值}     参数名&值

 success:function(a){   a就代表将来所接收到的数据

 //

 },

 error:function(b){    b就带表  404  500 3...

 //

 }

 }

  form表单提交表单项始终都是 同步

  action 把表单元素要提交给服务端的地址

  method 提交的方式 get或post(默认为get提交)

  对于所要提交的表单项 要设置name属性 name属性就相当于参数的名字

   <form action="http://xxxxxxxxxxxxx.php" method="post"></form>

 

//原生方法 Ajax的封装

function ajax(o) { //第一步:创建工具 var xhr; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); //标准 } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6 } //第二步和第三步 /*get请求可能会产生缓存,导致不能够及时更新数据 原因: get请求会把第一次请求的地址记录下来,若再次访问时,地址若是一模一样, 则会把第一次记录下来的地址所缓存的结果返回。 解决get请求所产生的缓存:保证每次请求的的地址不一样。若使用Math.random()有可能产生同一个数,故用当前时间*/ var time = new Date().date.getTime();

var parmater = HandlerData(o.data) //参数名=值&参数名=值&参数名&值 下面封装的函数 if(o.method.toLowerCase() == "get") { xhr.open("get", o.url + "?new=" + time + "&" + parmater, o.isAsyc); //第二步(地址?(?起连接作用,后面为动态网址)参数名=参数值 &参数名=参数值 ) xhr.send(); //get请求不需要传实参(第三步) } else { xhr.open("post", o.url, o.isAsyc); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //模拟表单体的方式提交(第二步) xhr.send(parmater); //post请求,若有提交的数据则传(第三步) } //第四步 if(o.isAsyc) { //异步 xhr.onreadystatechange = function() { //xhr.onreadystatechange 事件(若异步则注册该事件) if(xhr.readyState == 4) { //服务器数据完全接收,但不一定成功(读取完成(并不是成功)) if(xhr.status == 200) { //访问正常 会话成功(状态码 代表成功) o.success(xhr.responseText); //服务端返回的内容(得到响应的内容) } else { //会话失败 o.error(xhr.status); //返回失败状态码 } } } } else { //同步 if(xhr.readyState == 4) { if(xhr.status == 200) { //成功状态码 o.success(xhr.responseText); //服务端返回的内容(得到响应的内容) } else { o.error(xhr.status); //返回失败状态码 404 500...... } } } } // data:{参数名:值,参数名:值,参数名:值,参数名:值} => "参数名=值&参数名=值..." function HandlerData(data) { var arr = []; for(var key in data) { //key 是参数名 //data[key] 值 var item = key + "=" + data[key] //"参数名=值" arr.push(item); } //return arr.join("&"); //参数名=值&参数名=值&参数名=值&参数名=值&参数名=值 var str = arr.join("&") return str; }

//for example

ajax({ method: "get/post", url: url, isAsyc: true, success: function(data){ var arr = JSON.parse(data);   fn(arr); }, error: function(mes){ alert("数据获取错误") } })

JSON.stringify(): 将对象序列化为JSON字符串; JSON.parse(): 将JSON字符串解析为JavaScript对象。 xhr.readyState: 请求状态; readyState是一个只读属性,用一个整数和对应的常量表示XMLHttpRequest请求当前所处的状态。 xhr.responseText: 服务端返回的内容(古老叫法:报文???); xhr.status: http状态码,只读属性; 常见http状态码: 200:访问正常,一切正常; 301:moved Permanently,永久移动; 302:Move temporarily,暂时移动; 304:Not Modified,未修改; 307:Temporary Redirect,暂时重定向; 401:Unauthorized,未授权; 403:Forbidden,禁止访问; 404:Not Found,未发现指定网址; 500:Internal Server Error,服务器发生错误。

//jQuery方法

$.ajax({ url: "../json/index/main.json", type: "get", dataType: "json", success: function(data) { //console.log(data);//检查数据是否返回 }, error: function(wrong){ alert("this is wrong"); } });

 

//Angular $http方法

  //简单的 GET 请求,可以改为 POST   $http({    method: ‘GET‘,    url: ‘/someUrl‘   }).then(function successCallback(response) {    // 请求成功执行代码   }, function errorCallback(response) {   // 请求失败执行代码   });

  //POST 与 GET 简写方法格式:

  $http.get(‘/someUrl‘, config).then(successCallback, errorCallback);

  $http.post(‘/someUrl‘, data, config).then(successCallback, errorCallback);

 

//fetch方法

http://www.51xuediannao.com/javascript/fetchdyf_fetchxydajaxqqfa__1142.html

/* 函数 对象 封装:整理一段代码块,把变化的东西抽取为参数(形参) 请求方式(get  post) 请求的路径(url) 参数条件    参数名=值&参数名=值 是否异步   true false 异步请求的目的:拿到数据 处理数据的方式(会话失败)  success   函数定义   都有一个形参           数据 会话失败                                     error     函数定义 都有一个形参            会话的状态    404  500  参数:对象 o={ method:"get"   //"post"  请求方式             string url:"http://xxx.xxx.xx:80/xxx.php" string isAsyc:true     //false            boolean //data: "参数名&值" data:{参数名:值,参数名:值,参数名:值,参数名:值}     参数名&值 success:function(a){   a就代表将来所接收到的数据 // }, error:function(b){    b就带表  404  500 3... // } }  */
/* form表单提交表单项始终都是 同步action    把表单元素要提交给服务端的地址method    提交的方式  get或post对于所要提交的表单项  要设置name属性name属性就相当于参数的名字<form action="http://127.0.0.1:8989/1215code/handler.php" method="post"><p id="content"></p><p><label for="userName">用户名:</label><input name="uName" type="text" id="userName" /></p><p><label for="pwd">密码:</label><input name="pd" type="password" id="pwd" /></p><!--这个按钮可以像submit一样使用--><button id="login">登录</button>    </form>*/function ajax(o) {//第一步:创建工具var xhr;if(window.XMLHttpRequest) {xhr = new XMLHttpRequest(); //标准} else {xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6}//第二步和第三步/*get请求可能会产生缓存,导致不能够及时更新数据原因就是:get请求会把第一次请求的地址记录下来,若再次访问时,地址若是一模一样,则会把第一次记录下来的地址所缓存的结果返回。解决:get请求所产生的缓存:保证每次请求的的地址不一样。若使用Math.random()有可能产生同一个数,故用时间*/var date = new Date();var time = date.getTime();var parmater = HandlerData(o.data) //参数名=值&参数名=值&参数名&值   下面封装的函数
if(o.method.toLowerCase() == "get") {xhr.open("get", o.url + "?new=" + time + "&" + parmater, o.isAsyc); //第二步(地址?(?起连接作用,后面为动态网址)参数名=参数值 &参数名=参数值 )xhr.send(); //get请求不需要传实参(第三步)} else {xhr.open("post", o.url, o.isAsyc);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //模拟表单体的方式提交(第二步)xhr.send(parmater); //post请求,若有提交的数据则传(第三步)}//第四步if(o.isAsyc) { //异步xhr.onreadystatechange = function() {//xhr.onreadystatechange 事件(若异步则注册该事件)if(xhr.readyState == 4) { //服务器数据完全接收,但不一定成功(读取完成(并不是成功))if(xhr.status == 200) { //访问正常 会话成功(状态码 代表成功)o.success(xhr.responseText); //服务端返回的内容(得到响应的内容)} else { //会话失败o.error(xhr.status); //返回失败状态码}}}} else { //同步if(xhr.readyState == 4) {if(xhr.status == 200) {//成功状态码o.success(xhr.responseText); //服务端返回的内容(得到响应的内容)} else {o.error(xhr.status); //返回失败状态码 404  500......}}}}
// data:{参数名:值,参数名:值,参数名:值,参数名:值}   =>  "参数名=值&参数名=值..."function HandlerData(data) {var arr = [];for(var key in data) {//key 是参数名//data[key] 值var item = key + "=" + data[key] //"参数名=值"arr.push(item);}//return arr.join("&");//参数名=值&参数名=值&参数名=值&参数名=值&参数名=值var str = arr.join("&")return str;}

请求后台数据的几种方式

标签:wro   button   orb   定义   ring   sas   console   常见   授权   

原文地址:http://www.cnblogs.com/paul0705/p/7748056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!