WEB前端开发之ajax基础篇+跨域访问

来源：互联网发布：ubuntu 17.10安装教程编辑：程序博客网时间：2024/05/16 15:20

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ajax交互的四个步骤</title><div class="message"></div></head><body><input type="button" value="ajax 交互的四个步骤"><script>document.querySelector("input").onclick=function(){//querySelector只能获取一个元素//1.必须创建XMLHttpRequest对象var xhr = new XMLHttpRequest();//2.我要跟服务器交互，我必须代开这样一个连接xhr.open("post","01example.php");//3.我要给服务器发送数据，发送参数数据到服务器//还必须设置一个请求头道服务器//这个属于http协议的规定xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send("username=zhangsan");//4.我要接受服务器的数据，服务器在返回数据给客户端的时候回给一些状态，监听服务器状态的改变xhr.onreadystatechange=function () {//服务器在返回数据的过程当中，会给我0,1,2,3,4//其中4这个状态代表响应完成//怎么去获取这个状态，所有的操作都是通过这个对象完成alert(xhr.readyState);//会出现2，3，4所以不能在这里处理业务逻辑必须选定状态码if(xhr.readyState==4){//代表响应完成//响应完成并不代表响应是成功的//判断服务器端是响应成功，如果服务端返回了一个200的状态码，代表响应成功    //alert(xhr.status)会出现404if(xhr.status==200){    var data = xhr.responseText;    //alert(data);document.querySelector(".message").innerHTML=data;}}            }}</script></body></html>

0 －（未初始化）还没有调用send()方法
1 －（载入）已调用send()方法，正在发送请求
2 －（载入完成）send()方法执行完成，已经接收到全部响应内容
3 －（交互）正在解析响应内容

4 －（完成）响应内容解析完成，可以在客户端调用了

所以这里

alert(xhr.readyState);会出现2，3，4三个值表明客户端接收数据的状态从载入完成-交互-完成的改变

跨域

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body>我在这个页面去访问别的站点的数据，这个时候就会产生跨域.主站点是天猫，我现在想去请求极速数据，这个网站是一个数据接口网站.这时候就会出现跨域，就是跨域名访问.<script>var xhr = new XMLHttpRequest();xhr.open("get", "XXX");xhr.send(null);xhr.onreadystatechange=function () {if(xhr.readyState==4 && xhr.readyState==200){    var data = xhr.responseText;    alert(data);}        }</script></body></html>

这里会报错英文XMLHttpRequest是不能跨域的除非在服务器端来设置 Access-Control-Allow-Origin 头来进行授权，具体的代码是：

Response.AddHeader("Access-Control-Allow-Origin", "http://www.XXX.com:8080“);
这行代码表明只有来自 http://www.XXX.com:8080 下的脚本才可以进行访问该服务器资源
正确的跨域是
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><input type="button" value="通过script标签去发送请求"><script >//定义成一个全局函数function getInfo(obj) {console.log(obj);}document.querySelector("input").onclick=function () {//点击这个按钮，我给jd发送请求//http://www.jd.com/jd.php//假设我使用XMLHttpRequest 很明显就跨域了var script = document.createElement("script");//这个请求暂时是没有发送出去//现在还在内存中要把它挂在到页面上script.src="http://www.jd.com/jd.php?callback=getInfo";//默认get方式提交//因为现在服务端给我返回的数据//客户端以js的方式去解释这个数据//不符合js的语法，所以就报错了u.body.appendChile();//getInfodocment.body.appendChild(script);//我现在的目的是想在页面里面得到这个服务端返回的数据    //1：客户端给服务端传递一个回调函数，它还需要定义一个函数//2：服务端返回的是一个回调函数，并且将服务端的数据包在这个函数的调用里面    }</script><!--我使用$.ajax({url:"",如果说我的这个地址跨域了，就发送不了请求type:"",data:"",success:function(){}因为浏览器有限制，如果我们使XMLHttpRequest对象发送请求，就有跨域限制如果添加一个dataType等于jsonp，jQ的ajax方法底层就不使用XMLHttpRequest，而是创建一个script标签，然后通过script标签去发送请求.如果我使用script标签发送请求，怎么去接收服务器端返回的这个数据.这个问题比较重要.如果我使用script标签去发送请求，服务器返回了数据，返回的数据客户端会直接以javascript的方式去解析服务器端返回的数据script浏览器坑定调用js的解析引擎去解析数据怎么样保证这个数据解析式正确的为什么只能解决get方式的跨域，底层使用script标签发送请求src href 这些发送的请求都是get请求jsonp，客户端给服务端传递一个回调函数，服务端})--></body></html>

jQ下的跨域访问
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>采用jQ来解决跨域</title><script src="jQ/jquery-3.2.0.min.js"></script></head><body><input type="text" id="telephone" placeholder="手机号归属地查询">    <input type="button" value="查询"><div id="message"></div>    <script >        $(function () {$("input[type=button]").on("click",function () {    var telephone = document.getElementById("telephone").value;//这个是jQuery方法封装XMLHttpRequest对象提供的一个方法//jQ这个方法底层还是使用XMLHttpRequest 发送请求，还是有跨域限制$.ajax({    type:"get",url:"http://api.jisuapi.com/shou/query",data:"appkey=yourappkey&shouji="+telephone,datatype:"jsonp",//json with paddingsuccess: function (msg) {console.log(msg);var address = msg.result.province;var company = msg.result.company;document.getElementById("message").innerHTML="所属省份："+address+"所属公司类型："+company;                    }})});        })    </script></body></html>

这里这是讲了get方法的跨域访问不能传输大量数据
后续会写一篇post方法跨域访问（通过CORS）
                                                     1        0           	
					
					   WEB前端开发之ajax基础篇+跨域访问
	  	   WEB前端开发笔记之ajax的跨域访问（搜索引擎篇）
	  	   【Web前端开发】之Bootstrap基础(一)
	  	   web前端跨域访问
	  	   web前端开发基础
	  	   Web前端开发基础
	  	   用AJAX开发智能Web应用程序之基础篇
	  	   用AJAX开发智能Web应用程序之基础篇
	  	   用AJAX开发智能Web应用程序之基础篇
	  	   用AJAX开发智能Web应用程序之基础篇
	  	   Web基础之Ajax
	  	   《JavaScript & jQuery交互式Web前端开发》之JavaScript基础指令
	  	   web前端开发-html 5基础之标题标签
	  	   【Web前端】js 跨域访问问题
	  	   Web前端基础之jQuery
	  	   HTML5前端开发之基础篇
	  	   web前端开发——AJAX入门
	  	   Web之浅谈前端开发-基于最基础的前端技术
	     		  
	  	   leetcode 002 Add_Two_Numbers
	  	   吴晓波之《大败局1&2》&《激荡三十年》
	  	   Javascript 的作用域
	  	   单链表
	  	   关于raycast与screenpointoray的一些个人见解
	  	   WEB前端开发之ajax基础篇+跨域访问
	  	   php34-2-2添加商品分类的页面的无限极分类的总结
	  	   POJ3685_Matrix_两重二分
	  	   线程的同步之读写锁rwlock(二)
	  	   C++编译过程
	  	   java中文排序
	  	   装饰者模式
	  	   Linux Shell编程之算术运算
	  	   Java字符串和数字间的转换