Ajax

1、跨域：

• 域：域名协议端口一致的话就叫做同源。只要有一个不同，那么就是不同源。
• ajax不能请求不同源上的资源。就会产生跨域问题。
• 解决方案

2、计算机组成原理：

• 进程:一个应用程序或者一个计算要完成的功能。一个应用有可能是多个进程。
• 进程调度：异步，CPU一个时间只能做一件事情。
• 线程：进程细化。时间化成碎片。

3、Ajax:传输存储数据（页面无刷新技术，JS通过URL加载数据，过程用户不可见）

Asynchronous Javascript And XML（异步 JavaScript 和 XML）

• 异步（true）：不同步，页面无刷新技术（同时做几件事）。
• 同步（false）：一件事完成再做另一件事（一步一步）。

4、JSON：轻量级数据交换格式

JSON对象与字符串相互转化

• 字符串转化对象

let obj = JSON.parse(str);
let obj = eval('('+str+')');

• 对象转化字符串

let obj = JSON.stringify(str);

5、Ajax步骤：

• 创建XMLHttpRequest对象
  兼容

if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObjext('microsoft.XMLHTTP');
}

• open 建立连接
• 发送信息
• 接受信息
  eg:

    
    


    获取
    

6、获取XML

    
    


    获取
    

7、获取POST

    
    


    

        用户名：


        密　码：


    
    


    提交
    

8、Ajax封装

function Ajax(type, url, data, success, failed){
    // 创建ajax对象
    let xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    type = type.toUpperCase();  //转化为大写
    // 用于清除缓存
    let random = Math.random(); //为了防止浏览器缓存
    if(typeof data == 'object'){
        var str = '';
        for(var key in data){
            str += key+'='+data[key]+'&';
        }
        data = str.replace(/&$/, '');
    }
    if(type == 'GET'){
        if(data){
            xhr.open('GET', url + '?' + data, true);
        } else {
            xhr.open('GET', url + '?t=' + random, true);
        }
        xhr.send(null);
    } else if(type == 'POST'){
        xhr.open('POST', url, true);
        // 如果需要像 html 表单那样 POST 数据，请使用 setRequestHeader() 来添加 http 头。
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(data);
    }
    // 处理返回数据
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if((xhr.status >= 200&&xhr.status<300)||xhr.status==304){
                success(xhr.responseText);
            } else {
                if(failed){
                    failed(xhr.status);
                }
            }
        }
    }
}

9、三级联动使用ajax封装

    
    


    

        省：
        
            请选择省份
        
        市：
        
            请选择市
        
        区/县：
        
            请选择区县