$.ajax()

ajax数据请求方式,交互,跨域等相关问题

一、请求方式

1.$.ajax()

$.ajax({
type:"get",//请求方式“get”和“post”
url:"http://192.168.5.109/changda/public/api/news/getNews",//访问数据库地址,绝对地址,相对地址都行,前提都要是json类型的文件
async:true,
dataType: 'json', 
data:{
page_size:3//传参数
},
success:function(resu){

//获取成功数据,回调函数
console.log(resu);//控制台输出获取的数据参数
var list= resu.result;//遍历
var st='';
for (i=0;i<list.length;i++) {

//采用字符串拼接,渲染数据到页面;也可使用template模板,sea.js等渲染,后续会写出相关代码
st+='<div class="col-md-4 low col-xs-12">'
st+='<img src="'+list[i].main_img+'">'
st+='<h>'+list[i].title+'</h>'
st+='<p>'+list[i].content_text+'</p></div>',
}
$(".gg").append(st)//拼接的字符串添加到页面所需数据的地方
},
error:function(){

//获取数据失败回调函数
alert("请求错误!!")
}
});

2.$.getJSON()

$.getJSON(){"http://1921.254.24.32/urlasd-cbt",data:{},funcution(){

//数据获取成功的回调函数......和上面大致一样

}

}

二.跨域问题

1.处理跨域的方法1 -- 代理

比如在北京(www.beijing.com/sever.php)和上海(www.shanghai.com/sever.php)各有一个服务器,北京的后端(www.beijing.com/sever.php)直接访问上海的服务,然后把获取的响应值返回给前端。也就是北京的服务在后台做了一个代理,前端只需要访问北京的服务器也就相当与访问了上海的服务器。这种代理属于后台的技术,所以不展开叙述。

2.处理跨域的方法2 -- JSONP

假设在http://www.aaa.com/index.php这个页面中向http://www.bbb.com/getinfo.php提交GET请求,那么我们在www.aaa.com页面中添加如下代码:

var eleScript= document.createElement("script"); //创建一个script元素

 
eleScript.type = "text/javascript"; //声明类型、
 
eleScript.src = "http://www.bbb.com/getinfo.php"; //添加src属性 引入跨域访问的url
 
document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在页面中添加新创建的script元素

当GET请求从http://www.bbb.com/getinfo.php返回时,可以返回一段JavaScript代码,这段代码会自动执行,可以用来负责调用http://www.aaa.com/index.php页面中的一个callback函数。看下面一个列子:

www.aaa.com页面中:

 <script>

 
  function jsonp( json ){
 
    document.write( json.name ); //输出周星驰
 
}
 
<script>
 
<script src="http://www.bbb.com/getinfo.php"></script>

www.bbb.com页面中:

  jsonp({ "name":"周星驰","age":45 });

也就是在www.aaa.com页面中声明,在www.bbb.com页面中调用。但是JSONP只支持 “GET” 请求,但不支持 “POST” 请求。

3.处理跨域的方法2 -- XHR2(推荐方法)

“XHR2” 全称 “XMLHttpRequest Level2” 是HTML5提供的方法,对跨域访问提供了很好的支持,并且还有一些新的功能。

* IE10一下的版本都不支持

* 只需要在服务器端头部加上下面两句代码:

  header( "Access-Control-Allow-Origin:*" );

  header( "Access-Control-Allow-Methods:POST,GET" );

关于 “XHR2” 的更多信息大家可以查看官方文档,在这里就不详细叙述了,总之这是这个很好用的方法。

以上知识本人部分认识,希望能给你带来用处,如描述错误,也请多多指点指点

web前端技术学习的更多相关文章

  1. 绝版珍珍藏:web前端技术学习指南

    绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...

  2. 史上最全的web前端系统学习教程!

    这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...

  3. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  4. web前端的学习误区

    web前端的学习误区  网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们 ...

  5. 最受欢迎web前端技术总结

    Web前端技术发展非常快,主流技术的进步.想想刚毕业那会用asp技术.目前,该网站已经非常少见主流应用. 后来的后来J2EE框架.然后SpringMVC声望,然而,最近的各种js框架广泛传播,Html ...

  6. web前端开发学习路线图

    Web前端是一个入行门槛较低的开发技术,但更是近几年热门的职业,web前端不仅薪资高发展前景好,是很多年轻人向往的一个职业,想学习web前端,那么你得找到好的学习方法,以下就给大家分享一份适合新手小白 ...

  7. 20151028整理罗列某种开发所包括对技术(技术栈),“较为全面”地表述各种技术大系的图表:系统开发技术栈图、Web前端技术栈图、数据库技术栈图、.NET技术栈图

    ———————————— 我的软件开发生涯 (10年开发经验总结和爆栈人生) 爆栈人生 现在流行说全栈.每种开发都有其相关的技术.您是否觉得难以罗列某种开发所包括对技术(技术栈)呢?   您是否想过: ...

  8. 现代前端技术解析:Web前端技术基础

    ​ 最近几年,越来越多的人投入到前端大军中:时至至今,前端工程师的数量仍然不能满足企业的发展需求:与此同时,互联网应用场景的复杂化提高了对前端工程师能力的要求,一部分初期前端工程师并不能胜任企业的工作 ...

  9. Web前端培训学习心得

    web前端工程师技术日趋成熟,越来越多的行业巨头正不断向web前端工程师示好,在未来几年,web前端将会以更多的形式渗透到我们生活中的方方面面,因此越来越多的从业者开始关注web前端开发行业,今天小编 ...

随机推荐

  1. canvas 模拟时钟

    <meta charset="utf-8"> <canvas width="1000" height="1000" id= ...

  2. git 执行pull错误如何撤销

    比如你当前所在的空间是trunk,但是执行了git pull origin branches,这时需要回滚回去,可以用一下步骤: 1.运行git reflog命令查看你的历史变更记录,如下: 69fd ...

  3. Redis(三)-数据类型

    1.五种数据类型:字符串类型.字符串列表.有序字符串集合.哈希.字符串集合 2.字符串类型常用操作 (1)赋值 $ set key value (2)取值 $ get key (3)删除 $ del ...

  4. 用Spark完成复杂TopN计算的两种逻辑

    如果有商品品类的数据pairRDD(categoryId,clickCount_orderCount_payCount),用Spark完成Top5,你会怎么做? 这里假设使用Java语言进行编写,那么 ...

  5. 2018-2019-2 网络对抗技术 20165303 Exp4 恶意代码分析

    实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systr ...

  6. 在vue中使用watch监听对象或数组

    最近发现在vue中使用watch监听对象或者数组时,当数组或者对象只是单一的值改变时,并不会出发watch中的事件. 在找问题过程中,发现当数组使用push一类的方法时,会触发watch,如果只是单一 ...

  7. git设置用户名和邮箱

    用git config --global user.name "your name"命令来设置你的用户名 用git config --global user.email " ...

  8. 再次精读《javascript高级程序设计第3版》学习笔记(1)

    第一次拿起这本书是2016年暑假,时隔2年,又一次开始研读这本经典书籍.每次读,都是对之前的一次沉淀和总结,每次都会有新的收获.

  9. day 11 装饰器

    1.day 10 内容复习 # 之前做得的题 以后再遇到能保证会 # 下周二考 :所有的知识 # 面试题:认真对待 # # 三元运算符 # 接收结果的变量 = 条件为真的结果 if 条件 else 条 ...

  10. windows下Redis安装及利用java操作Redis

    一.windows下Redis安装 1.Redis下载 下载地址:https://github.com/MicrosoftArchive/redis 打开下载地址后,选择版本 然后选择压缩包 下载 R ...