原生AJAX操作及跨域问题

原生AJAX

​ Ajax全称“Async Javascript And XML”即：异步的javascript和XML。它是一种称谓，并不指代某项具体的技术，准确来说是一系列技术的集合.现在，所有的无刷新操作都被称为“Ajax”. 使用ajax避免了整页数据的刷新，也减少了请求等待的时间，提高了用户体验

xhr 对象

用一个对象发送HTTP请求

var xhr = new XMLHttpRequest();

XHR 对象的属性和方法

属性

readyState 准备阶段

responseText 返回的响应信息

status 请求连接的状态码

statusText 状态描述

事件

当请求链接状态改变时

xhr.onreadystatechange = function(){
     }

其它事件

onloadend

方法
xhr.open(get|post, url, true|false)
xhr.send()

get 方式

	// 1.创建对象
	var xhr = new XMLHttpRequest();

	// 2.事件
    xhr.onreadystatechange = function(){
     
        if (this.readyState==4 && this.status==200){
     
            alert(this.responseText);
        }
    }

	// 3.建立连接
	xhr.open('get', './php/get.php?a=3&b=7', true);

	// 4.发送请求
	xhr.send();

post 方式

// 1.创建对象
    var xhr = new XMLHttpRequest();

// 2.绑定事件
    xhr.onreadystatechange = function(){
     
        if (this.readyState==4 && this.status==200){
     
            alert(this.responseText);
        }
    }

// 3.建立连接
	xhr.open('post', './php/post.php', true);

// 早期,传统post传参,需要设置请求头信息
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// 4.发送 '名称=值&名称=值&名称=值'
	xhr.send('x=7&y=9');

JSON 返回值

JSON.parse( xhr.responseText )
var obj = eval('(' + xhr.responseText + ')');

同步 or 异步

php sleep() 演示

细节
xhr.send()
return xhr.responseText; // 回调没有返回,所以现在只能是一个空字符串被返回
// 还是同步异步的问题

跨域

ajax 默认情况下是不能跨域的. 演示不能跨域.

方法1: 本地服务器代理, 然后返给本地ajax在请求的文件中设置

方法2: jsonp

请求端

<script>
	function xxoo(形参){
      
		... 处理形参的代码
	}
script>

<script src="请求地址?callBack=xxoo">script>

响应端

输出  'xxoo(字符串形式的你要的数据)' 字符串

方法3: 服务端特殊设置

// 在要被访问的网站文件中设置
// 允许指定网站发来的请求
header('Access-Control-Allow-Origin: http://localhost');  

上传文件

fm.onsubmit = function(){
     
    var fmdata = new FormData(this);
    

    
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
     };
    
    // 绑定进度
    xhr.upload.onprogress = function(ev){
     
        if(ev.lengthComputable==true) {
     
            var per = parseInt(100*ev.loaded/ev.total);
            document.getElementById('prog').style.width = (per + '%');
        }
    }
    
    
    xhr.open('post','up.php',true);
    xhr.send(fmdata);
    
    return false;
}

编码问题

encodedURI('南京')