怎么做旅店网站/市场调研报告1500字

什么是其他的域，怎样算跨域？

页面本身有协议、域名、端口号。

如： https://www.baidu.com:80

http端口号默认是80；
https端口号默认是443；
协议、域名、端口号，这三个有任意一个不一样就属于跨域

跨域这个行为，发生在哪里？

1. 即时跨域了(协议、域名、端口号有一个不一样)，请求也是可以发出的；
2. 服务器端也是可以接收的；
3. 服务器端也是可以正常处理的；
4. 服务器端也是可以正常返回数据的；
5. 浏览器端也能够接受到这些数据；
6. 接收到以后，发现当前的域和请求的域不同，所以判定为跨域；
7. 我们写的代码在这等着处理接收的数据，但是浏览器判定为跨域了，所以不会把结果传递给我们的代码；

哪些资源算是跨域请求的资源

1. 后端接口的数据；
2. 其它域的cookie;
3. 其它域的缓存；

虽然跨域了但是我们依然需要这个数据怎么办？

解决跨域问题：

1. 后端配合跨域。(别人的后端)

   eg:pan.baidu.com  -->  zhidao.baidu.com  // 二级域名网盘访问知道，
   

   上面这种情况都是自己人，就使用：

   （1） JSONP(正常情况返回的都是JSON格式，JSONP是一种特殊的格式)；

   （2）后端设置Access-Control-Allow-Origin属性以支持跨域

   以上这些必须后端配合我们，如果后端不配合是无法进行跨域的。

2. 后端不配合跨域。

​ （1）iframe<缺点：只能显示不能控制(不能用js操作)>

<iframe src="http://www.baidu.com" frameborder="0"></iframe>

​ （2）通过后端代理(自己的后端)

因为之前说过跨域发生在浏览器上，但是如果让跨域发生在后端代理上，就不会形成跨域。

使用Ajax

使用ajax公分为四个步骤：

1. 创建XMLHttpRequest对象；

   var xhr = new XMLHttpRequest();这个对象时IE6以上浏览器使用的;
   如果要兼容浏览器：
   var xhr = null;
   if(window.XMLHttpRequest){  // 如果浏览器能够识别window.XMLHttpRequestxhr = new XMLHttpRequest();
   }else{xhr = new ActiveXObject("Microsoft.XMLHTTP");  // IE6
   }
   

2. 连接服务器；

   xhr.open("GET","http://deloper.***.com",true);
   

   如果open的第三个参数默认不传或者传true，为异步模式。填false为同步模式。
3. 发送请求；

   xhr.send();  // 为了避免发生意外，这句话应放到代码的结尾，
   

4. 接收返回的数据；

   // 使用这个方法接收请求的数据
   xhr.onreadystatechange = function(){console.log(xhr.readyState);  // 打印2、3、4； 当值为4的时候表示请求完成，已经接收到数据if(xhr.readyState == 4 && xhr.status == 200){console.log(xhr.responseText);  // 打印返回的结果// 也可以转化成JSON格式var data = JSON.parse(xhr.responseText);console.log(data);}}
   

   状态码：

• 200：请求成功,一切正常，数据成功返回。
• 3##：表示重定向(因为访问的网站不是不变的，有可能访问的网站正在更新，过去在A接口返回，现在在B接口返回，所以访问的时候就没有值；但是这个网站能够让我们正常访问，这个接口就会返回一个3**,用来告诉我们接口迁移到了哪里。这个3##的状态码一但返回给了浏览器，浏览器就会接收到，服务器返回的已经迁移的新的地址。浏览器就会自动的重新访问新的地址)；
• 4##：表示客户端错误，常见的404<页面没找到>，就是说url是错的;
• 5##：表示服务器端错误，比如后端在执行一段代码的时候报错，导致没办法返回结果，这是返回的状态码就是5**。

封装ajax请求函数

/*** * @param {*} options * method,* url,* data,* isAsync* error* success*/
function ajax(options) {var method = options.method || "GET";var url = options.url || "";var data = options.data || "";var isAsync = options.isAsync !== undefined ? options.isAsync : true;var error = options.error || function () { };var success = options.success || function () { };// 创建XMLHttpRequest对象var xhr = null;if (window.XMLHttpRequest) {xhr = new window.XMLHttpRequest;} else {xhr = new ActiveXObject('Microsoft.XMLHTTP');}xhr.error = function () {console.log(new Error());}xhr.onreadystatechange = function () {if (xhr.status === 200 && xhr.readyState === 4) {console.log(JSON.parse(xhr.responseText));}}method = method.toUpperCase();if (method === "GET") {if (url.indexOf("?") > -1) {  // 大于-1表示url里面有问号if (url.indexOf("?") = url.length - 1) { // 二层判断url.indexOf("?") = url.length 表示问号是url中最后一位，可以直接拼数据dataurl += data;} else { // 表示url中问号后面有数据，需要拼接 & 符号url += "&" + data;}} else {   // 表示url中没有问号，需要在url中拼接问号url += "?" + data;}xhr.open(method, url, isAsync);xhr.send();} else {  // mehtod为post的时候xhr.open(method, url, isAsync);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.send();}}

点击查看跨域问题详解