Ajax和跨域

1、Ajax

全称asynchronous(异步的)JavaScript and XML,是一种无需加载网页而更新网页部分内容的技术。

同步:客户端发起请求,然后客户端一直等待服务器端处理,收到服务器端响应后,客户端重新载入整个页面,如果有错误客户端再次发起请求……

异步:客户端发起请求,服务器端处理的同时客户端可以继续运行,没有等待,服务器端的响应会实时反馈给客户端。

步骤:

运用XMLHttpRequset对象和web服务器进行数据的异步交换;

运用JS操作DOM实现动态局部刷新。

语法:

var request=new XMLHttpRequest();

request.open("GET/POST","URL",true/false);  //true表示异步请求,默认可省略,false表示同步请求

request.send(string);

XMLHttpRequest对象的属性和方法:

readyState属性:HTTP请求的状态。4表示HTTP响应已完全接收。

status属性:HTTP状态码。202表示成功,404表示"Not Found"。

responseText属性:服务器接收到的响应体,字符串形式。

onreadystatechange事件句柄:每次readystate属性改变的时候调用的事件句柄函数。

可参考(http://www.w3school.com.cn/xmldom/dom_http.asp)

例:发送Ajax请求 查询并处理

var request=new XMLHttpRequest();
request.open("GET","server.php?number="+document.getElementById("keyword").value);
request.send();
request.onreadystatechange=function(){
    if(request.readyState===4){
        if(request.status===200){
            document.getElementById("searchResult").innerHTML=request.responseText;
        }else{
           alert("发生错误"+request.status);
        }
    }
}

2、JSON

全称JavaScript Object Notation,是一种存储和交换信息的表示法,类似XML,它采用【键值对】的方式组织,易于及其解析,

json是独立于语言的,只要按照规则任何语言都可以解析json,

与xml相比,json长度短,读写速度快,可以使用js内建的方法eval()解析转换为js对象,

表示:json值可以是字符串(用双引号)、对象(用{})、数组(用[])、数字、true/false、null,

如,var jsondata=‘{"staff":[{"name":"mavis","age":24},{"name":"jack","age":25},{"name":"tony","age":26},]}‘ ;

json解析

(1)eval(string):var jsonobj=eval(‘(‘+jsondata+‘)‘);

只接受字符串为参数,eval方法不会检查json字符串是否合法,而且json字符串中的JavaScript方法会自动执行,如果json字符串包含恶意代码,比如window.location转向了一个恶意地址,危险!不建议使用

(2)JSON.prase():

把json字符串解析为对象,会检查json字符串是否合法,不会执行json字符串中的JavaScript方法

3、用jQuery实现Ajax

$.ajax({

type:"POST",  //POST/GET

url:"请求地址",

dataType:"json", //预期服务器返回的数据类型

data:{name:$("#staffname").val(),number:$("#staffnumber").val(),age:$("#staffage").val()},

success:function(data){},  //请求成功的回调函数,传入返回的数据和包含成功代码的字符串

error:function(jqXHR){alert("请求失败:"+jqXHR.status);}  //请求失败的回调函数,传入XMLHttpRequest对象

})

4、跨域

域名:http://www.abc.com:8080/index.js

http://协议

www子域名

abc.com主域名

8080端口号(http协议的默认端口号为80,一般可以省略)

协议、子域名、主域名、端口号其中任意一个不同,就叫做不同域,不同域之间相互请求资源叫作“跨域”。

JavaScript出于安全考虑,不允许跨域即同源策略,但是<script><img>这些含有src属性的标签没有同源策略,所以

处理跨域方法1:jsonp

原理:给<script src="跨域的文件的地址"></script>,这个跨域的文件返回跨域的服务器端数据。因此json只支持GET请求,不支持POST请求。

在www.aa.com页面中

<script src=“http://www.bb.com/jsonp.js”></script>

<script>

function jsonp(json){alert(json[“name”]);}

</script>

在www.bb.com页面中

jsonp({"name":"洪七公","age":70})

例,客户端:

$.ajax({
type:"GET",
url:"http://***/serverjsonp.php?number="+$("#keyword").val(),
dataType:"jsonp",
jsonp:"callback",//回调函数
jsonpCallback:"callbackname",//回调函数名称,如省略服务器会自动生成
success:function(data){
……
},
error:function(jqXHR){
alert("发生错误"+jqXHR.status);
}
});

服务器端部分语句:

$jsonp=$_GET["callback"]; 

$result = $jsonp.‘({"success":false,"msg":"没有找到员工。"})‘;

$result = $jsonp.‘({"success":true,"msg":"找到员工:***"})‘;

查看调试工作台:

Request URL:http://***/serverjsonp.php?number=101&callback=callbackname&_=1496980303811

返回值:callbackname({success: true, msg: "找到员工:***"}

处理跨域方法2:XHR2

HTML5提供的XMLHttpRequest level2已经实现了跨域访问,但是IE10以下还不支持。

实现方法很简单,只需在服务器端代码里加上:

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

header("Access-Control-Allow-Methords:POST/GET");

即可。

以上就是我对Ajax异步请求和跨域的理解,终于写完啦啦啦

禁止转载

时间: 2024-08-19 08:05:15

Ajax和跨域的相关文章

AJAX及其跨域的主要解决方法

AJAX = Asynchronous JavaScript andXML(异步的 JavaScript 和 XML).通过在后台与服务器进行少量数据交换,使网页实现异步更新.要明白异步交互可以通过同步和异步的对比很容易明白: 同步交互,就是最常见的click-refresh模式,点一个连接或提交一个表单,然后就必须重载整个页面 异步交互,javascript根据返回的数据,不刷新页面而改变当前页面的显示,例如:新浪微博,百度地图. Ajax的异步交互从XMLHttpRequest这个对象开始,

JQuery+ajax+jsonp 跨域访问

Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 关于Jsonp更详细的资料请参考http://baike.baidu.com/view/2131174.htm,下面给出例子: 一.客户端 Html代码   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.

AJAX的跨域与JSONP

AJAX的跨域与JSONP 什么是AJAX的跨域请求 出于安全的考虑,如果你要从www.a.com通过Ajax来请求另外一个网站www.b.com的内容,浏览器是不允许你这样做的(不理解这里的安全是指什么?想想如果没有这个限制的话,黑客可以做些什么).那什么样的情况下算是跨域?域名不同那当然算是跨域了,例如a.com向b.com发送请求,这当然就是跨域了,不允许的.不过子域名不同(例如sub.a.com向www.a.com发送请求)甚至是同域名不同端口(例如a.com:80向a.com:8080

解决Ajax不能跨域的方法

1.  Ajax不能跨域请求的原因 同源策略(Same Origin Policy),是一种约定,该约定阻止当前脚本获取或者操作另一个域下的内容.所有支持Javascript的浏览器都支持同源策略,也就是说浏览器可以隔离来自不同源的内容,阻止跨域请求的发生. 2. 解决方法 (1) CORS 在被请求的脚本中使用header()函数设置http响应,从而使得跨域请求能够发生: header(“Access-Control-Allow-Origin:*”); 这一方法称为CORS(Cross-Or

关于AJAX的跨域问题

最近过年的这几天在做毕业设计的时候遇到了一个关于AJAX的跨域问题,本来我是想要用一下聚合数据平台提供的天气预报的接口的,然后做一个当地的天气情况展示,但是在使用AJAX的时候,被告知出现错误了. 这是由于浏览器的同源策略引起的,那么什么是同源策略呢,同源策略就是在不同域下请求另一个页面中的数据时,这是不被允许的.也就是会出现上面的问题. 那么什么是不同域呢.一个域名地址的组成有以下几个部分:协议.子域名.主域名.端口号.请求资源地址. 例如:http://www.abc.com:8080/se

AJAX POST&amp;跨域 解决方案 - CORS

跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一. 和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定.所以折腾了下闻名已久的CORS(跨域资源共享,Cross-Origin Resource

ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝试,中途也遇到了不少问题.今天就来讨论一下其中之一的问题,WebAPI与前端Ajax 进行跨域数据交互时,由于都在不同的二级域名下(一级域名相同),导致Cookies数据无法获取. 最开始通过头部(Header)将Cookies传输到其WebAPI,也能解决问题. 下面讲述另外一种解决方案. 解决过

jquery ajax jsonp跨域调用实例代码

今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.WebForm1" %><!DOCTYPE html P

JavaScript(10)——Ajax以及跨域处理

Ajax以及跨域处理 哈哈哈,终于写到最后一章了.不过也还没有结束,说,不要为了学习而学习,恩.我是为了好好学习而学习呀.哈哈哈.正在尝试爱上代码,虽然有一丢丢的难,不过,我相信我会的! [Ajax] Ajax技术的核心是XMLHttpRequest对象(简称HXR).Ajax通信与数据格式无关,这种技术就是无须刷新页面即可从服务器取得数据,但不一定是XML数据. [XMLHttpRequest对象] IE5是第一款引入XHR对象的浏览器.XHR对象是通过MSXML库中的一个ActiveX对象实

ASP.NET MVC &amp; WebApi 中实现Cors来让Ajax可以跨域访问 (转载)

什么是Cors? CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing).它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制.本文详细介绍CORS的内部机制. 一.简介 CORS需要浏览器和服务器同时支持.目前,所有浏览器都支持该功能,IE浏览器不能低于IE10. 整个CORS通信过程,都是浏览器自动完成,不需要用户参与.对于开发者来说,CORS通信与同源的AJAX通信没有差别,代