Ajax的基本应用

Ajax

Ajax是前后台实现数据交互的一门技术，可以在无需加载整个网页的情况下能够更新部分网页的技术，也就是说在后台与服务器之间进行少量的数据交互可以使网页不用更新整体，只是更新更改的那一部分。Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

Ajax的使用

使用Ajax需要下载安装它的运行环境xampp https://www.apachefriends.org/zh_cn/index.html由于是国外的网站，可能会比较慢。进去之后选择与你电脑相匹配的系统版本下载安装，一直点击下一步即可。安装完成后，找到根目录下有一个xampp.contrl.exe 的应用程序，打开这个程序，开启Apache服务器就可以使用了。
第一步创建XmlHttpRequest()对象,调用这个对象的open方法，open()接收三个参数，第一个参数是请求方式, 第二个是请求文本的 URL,第三个是是否异步，true表示异步，false表示同步。发送请求。注册事件onreadystatechange事件,onload事件

Ajax请求纯文本或Ajax请求PHP文件

首先在xampp/htdocs的路径下新建一个文件夹（名字任你），进去新建一个.txt的文件，里面随便写点吧
js代码如下：

<script>
document.getElementsById("btn").addEventlistener('click',loadTxt);
function loadTxt(){
var XHR = new XmlHttpRequest();//创建一个对象
XHR.open('GET','slow.txt',true);//如果请求的是PHP文件，把slow.txt改成对应的PHP文件
XHR.onload = funciton(){
document.write(this.response);
};
XHR.send();
}
//这里做一下兼容,因为IE6浏览器支持的是ActiveXobject()的方法
//这里封装一个createXHR()函数;
/**
/*param createXHR()
/* 封装一个兼容ie5，6，7的XmlHttpRequeat的使用函数
/*/
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){//ie7+，Firefox chrome
    return new XMLHttpRequest;
}else if(typeof ActiveXObject !="undefined"){//ie6以下
    if(typeof arguments.callee.activeXString !="string"){
        var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
        for(i=0,len=versions.length;i<len;i++){
            try{
                new ActiveXObject(versions[i]);
                arguments.callee.activeXString = versions[i];
                break;
            }catch(ex){    
                //跳过
            }
        }
    }
    return new ActiveXObject(arguments.callee.activeXString);
}else{
    throw newError("No XHR object available.");
}

}

Ajax请求Json对象

function loadUser(){
        var xhr = new XMLHttpRequest();
        xhr.open("GET","user.json",true);//用Get请求
        xhr.onload = function(){
            if (this.status == 200) {
                // console.log(this.responseText);
                var user = JSON.parse(this.responseText);
                // console.log(user.name);
                var output = '';
                output += 
                    '<ul>'+
                        '<li>'+user.id+'</li>'+
                        '<li>'+user.name+'</li>'+
                        '<li>'+user.email+'</li>'+
                    '</ul>';
                ;
                document.getElementById('user').innerHTML = output;
            }
        }
        xhr.send();
    }

Ajax请求网络接口(以github接口为例)

function loadUsers(){
        var xhr = new XMLHttpRequest();
        xhr.open("GET","https://api.github.com/users",true);//这里的URL改成网络地址
        xhr.onload = function(){
            var users = JSON.parse(this.responseText);
            // console.log(users);
            var output = '';
            for(var i in users){
                output += `
                    <div class="user">
                        <img src="${users[i].avatar_url}" width="70" height="70" />
                        <ul>
                            <li>ID: ${users[i].id}</li>
                            <li>Login: ${users[i].login}</li>
                        </ul>
                    </div>
                `;
            }
            document.getElementById('users').innerHTML = output;
        }
        xhr.send();
}

Ajax的两种请求方式（get请求和post请求）

get是最常见的请求，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器，对XHR而言，位于传入open( )方法的URL末尾的查询字符串必须经过正确的编码才行，即查询字符串的每个参数的名称和值都必须使用encodeURIComponent（）进行编码，然后才能放到URL的末尾，而且所有的名-值对都必须由&号分隔；

xhr.open("GET","example.php?name1=value1&name2=value2",true);

POST请求应该把数据作为请求的主体提交，其请求的主体可以包含非常多的数据，而且格式不限。
POST请求必须设置Content-Type值为application/x-form-www-urlencoded；如果不设置Content-Type 头部信息，那么发送给服务器的的数据就不会出现在$_POST超全局变量中。
发送请求时POST请求在使用send方法时,需赋予其参数；

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(params);

get请求和post请求两者的区别

（1）使用Get请求时,参数在URL中显示,而使用Post请求,则不会显示出来；
（2）Post传输的数据量大，可以达到2M，而Get方法由于受到URL长度的限制,只能传递大约1024字节.
（3）Get请求请求需注意缓存问题,Post请求不需担心这个问题；
（4）Post请求必须设置Content-Type值为application/x-form-www-urlencoded；
（5）发送请求时,因为Get请求的参数都在url里,所以send函数发送的参数为null,而Post请求在使用send方法时,却需赋予其参数；
（6）GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。

post请求：

function postMethod(){
var xhr = new createXHR();
var userName = document.getElementById("userName").value;
var age = document.getElementById("age").value;
var data = "userName=" + encodeURTComponent( userName ) + "&age=" + encodeURTComponent( age );
//不用担心缓存问题
xhr.open( "post", "example.php", true );
//必须设置,否则服务器端收不到参数
xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
xhr.onreadystatechange = function(){
    if( xhr.readyState = 4 && xhr.status == 200 ){
        document.getElementById("result").innerHTML = xhr.responseText;
    }
}
//发送请求,要data数据
xhr.send( data );
}

get请求：

function getMethod(){
var xhr = new createXHR();
var userName = document.getElementById("userName").value;
var age = document.getElementById("age").value;
//添加参数,以求每次访问不同的url,以避免缓存问题
xhr.open( "get", "example.php?userName=" + encodeURTComponent( userName ) + "&age=" + encodeURTComponent( age ) + "&random=" + Math.random(), true );
xhr.onreadystatechange = function(){
    if( xhr.readyState == 4 && xhr.status == 200 ){
        document.getElementById("result").innerHTML = xhr.responseText;
    }
}
//发送请求,参数为null
xhr.send( null );
}