js的ajax总结

ajax是什么，ajax是一种使用现有标准的新方法，它通过与服务器交换数据并更新部分网页的技术，可以在不刷新整个页面的情况下，能够更新当前网页的技术。与之前的表单提交相比，ajax不用刷新页面，用户的体验非常好。ajax采用的通信方式是异步通信的方式，可以更快速的响应变化。

1.原生ajax

1）创建Ajax引擎对象，Ajax的核心是JavaScript对象XmlHttpRequest

2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）

3）绑定提交地址

4）发送请求

5）监听里面处理响应数据

function createXHR(){
	if(typeof XMLHttpRequest != "undefined"){
		return new XMLHttpRequest();
	} else if(typeof ActiveXObject != "undefined"){  //IE
		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){
					console.log(ex);
				}
			}
		}
		return new ActiveXObject(arguments.callee.activeXString);
	} else{
		throw new Error("NO XHR object available.");
	}
}

var xhr = createXHR();


if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
	alert(xhr.responseText);
}else{
	alert("Request was unsuccessful:" + xhr.status);
}
// responseText: 作为响应主体被返回的文本
// responseXML: 如果响应的内容类型是"text/xml"或者"application/xml"，这个属性中将保存包含响应数据的XML DOM文档
// status: 响应的HTTP状态
// statusText: 响应的HTTP状态说明

// readyState: 表示请求/响应过程的当前活动阶段

var xhr = createXHR();
xhr.onreadystatuechange = function(){
	if(xhr.readyState == 4){
		if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){

		}
	}
}
xhr.open("get","example.txt",false);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置自定义的请求头部信息
xhr.send(null);

这里createXHR()方法封装好了一个兼容各个浏览器的ajax，兼容IE， var xhr = new XMLHttpRequest();  var xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE，然后注册回调函数

xhr.onreadystatechange = function(){}，xhr对象有以下几个属性：

responseText: 作为响应主体被返回的文本

responseXML: 如果响应的内容类型是"text/xml"或者"application/xml"这个属性中将保存包含响应数据的XML DOM文档

status: 响应的HTTP状态

statusText: 响应的HTTP状态说明

readyState: 表示请求/响应过程的当前活动阶段

然后就是发送请求

xhr.open(method,url,asyn)

method:指定请求方式为get还是post

 url：请求路径

 asyn：true/false（true表示支持异步，false表示同步）

2.jquery的ajax

主要有三种形式：$.post()，$.get()，$.ajax()

使用以上三种方式需要先引入jquery.js插件，例如<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

1) $.post()方法

$.post(url, [data], [callback], [type]) 其中，url是请求路径，data请求参数，callback回调函数，type响应结果的类型，发送的是post请求

2) $.get()方法

$.get(url, [data], [callback], [type]) 其中，url是请求路径，data请求参数，callback回调函数，type响应结果的类型，发送的是get请求

3) $.ajax()方法

$.ajax({

    url : "ajaxServlet",//请求路径

    type : "POST" ,//七种请求方式

    //data : "username=jack & age=2",//请求参数

    data:{"username":"jack","age":23},//json数据格式

    scuess:function(data){

    alert(data);

    },//响应成功后的回调函数

    error:function(){

    alert("error");

    }

   })

$.ajax()的参数还有很多，可以百度搜索一下，这里只是列举了常用的几个参数。

//$.post()方法
$.post('/register',
                    {
                        acnt: acnt,
                        pswd: pswd
                    },
                    function (data) {
                        console.log(data);
                        // if(data[0].user_nam)
                        data = eval(data);
                        console.log(data[0].user_name);
                        console.log(data[0].password);
                        if((data[0].user_name == acnt && data[0].password == pswd) || acnt == 'guest'){
                            if(data[0].user_name == 'admin'){
                                window.location.href = 'admin';
                            } else if(data[0].user_name == 'guest'){
                                window.location.href = 'admin';
                            } else if(data[0].user_name == 'market'){
                                window.location.href= 'admin';
                            } else if(data[0].user_name == 'tech'){
                                window.location.href = 'admin';
                            } else if(data[0].user_name == 'tech2'){
                                window.location.href = 'admin';
                            } else{
                                alert("没有该用户");
                            }
                        }else{
                            if(data[0].user_name != acnt){
                                alert("用户不存在");
                            }else {
                                if(data[0].password != pswd){
                                    alert("密码错误");
                                }
                            }
                        }
                    }
                );
//$.get()方法
  $.get('/product', function (data) {
            let result = JSON.parse(data);
            console.log(result);

            });
//$.ajax()方法
$.ajax({
                  url: '/register',
                  type: "post",
                  data: data,
                  dataType: "json",
                  contentType: 'application/json;charset=UTF-8',
                  success: function(result,status) {
                      console.log(result);
                      var data = eval(result);
                      if((data[0].user_name == acnt && data[0].password == pswd) || acnt == 'guest'){
                            if(data[0].user_name == 'admin'){
                                window.location.href = 'index';
                            } else if(data[0].user_name == 'guest'){
                                window.location.href = 'index';
                            } else if(data[0].user_name == 'market'){
                                window.location.href= 'index';
                            } else if(data[0].user_name == 'tech'){
                                window.location.href = 'index';
                            } else if(data[0].user_name == 'tech2'){
                                window.location.href = 'index';
                            } else{
                                alert("没有该用户");
                            }
                        }else{
                            if(data[0].user_name != acnt){
                                alert("用户不存在");
                            }else {
                                if(data[0].password != pswd){
                                    alert("密码错误");
                                }
                            }
                        }
                  },
                  error: function(XMLHttpRequest,textStatus) {
                      console.log(XMLHttpRequest);
                      console.log(textStatus);
                  }
                });

3.axios的ajax

需要安装axios, npm install axios

ajxos(method,url,data,function())

axios({
    method: 'post',
    url: '/user',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {

    console.log(error);
});

axios.get()方法，axios.post()方法类似与jquery的ajax，各种ajax大同小异，原理一样，只是进行的封装方法不同