Ajax详解

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录

前言

一、ajax是什么？

1.AJAX的优势

二、实现方法

1.操作流程

2. 原生的JS实现方式（了解）

三.AJAX的状态码

四.JQEURY实现方式 

---

---

前言

1. 概念： ASynchronous JavaScript And XML    异步的JavaScript 和 XML

1. 异步和同步：客户端和服务器端相互通信的基础上
        * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
        * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

---

一、ajax是什么？

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1] 
        通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
        传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

       用于 提升用户的体验

1.AJAX的优势

• 不需要插件的⽀持，原⽣ js 就可以使⽤
• ⽤户体验好（不需要刷新⻚⾯就可以更新数据）
• 减轻服务端和带宽的负担

1. 缺点：搜索引擎的⽀持度不够，因为数据都不在⻚⾯上，搜索引擎搜索不到

二、实现方法

1.操作流程

首先通过PHP页面将数据库中的数据取出
取出后转成json格式的字符串，后利用ajax把字符串返还给前台
再利用json.parse解析通过循环添加到页面上
那么反之，前端的数据可以利用ajax提交到后台
但是后台是没有办法直接把这些数据插入到数据库中，所以要先提交到PHP页面上
最后再由PHP将数据插入到数据库中

2. 原生的JS实现方式（了解）

 //1.创建核心对象

 var xmlhttp;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }

2. 建立连接

 参数：
                        1. 请求方式：GET、POST
                            * get方式，请求参数在URL后边拼接。send方法为空参
                            * post方式，请求参数在send方法中定义
                        2. 请求的URL：
                        3. 同步或异步请求：true（异步）或 false（同步）

 xmlhttp.open("GET","ajaxServlet?username=tom",true);

 //3.发送请求

 xmlhttp.send();

//4.接受并处理来自服务器的响应结果
                //获取方式 ：xmlhttp.responseText
                //什么时候获取？当服务器响应成功后再获取
    
                //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。

 xmlhttp.onreadystatechange=function()
	            {
	                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
	                if (xmlhttp.readyState==4 && xmlhttp.status==200)
	                {
	                   //获取服务器的响应结果
	                    var responseText = xmlhttp.responseText;
	                    alert(responseText);
	                }
	            }

三.AJAX的状态码

• ajax 状态码 - xhr.readyState

• 是用来表示一个 ajax 请求的全部过程中的某一个状态

•  readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行 
   readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后 
   readyState === 2 : 表示 send 方法已经执行完成
   readyState === 3 : 表示正在解析响应内容
   readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了
  

• 这个时候我们就会发现，当一个 ajax 请求的全部过程中，只有当 readyState === 4 的时候，我们才可以正常使用服务端给我们的数据

• 所以，配合 http 状态码为 200 ~ 299

•  一个 ajax 对象中有一个成员叫做 xhr.status
   这个成员就是记录本次请求的 http 状态码的 
  

 xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        if(xhr.status == 200){
                            if(success){
                                success(xhr.responseText);
                            }
                        }else{
                            if(error){
                                error("Error：" + xhr.status);
                            }
                        }
                    }
                }
            }

 

四.JQEURY实现方式 

1. $.ajax()

* 语法：$.ajax({键值对});
             //使用$.ajax()发送异步请求

 $.ajax({
	                url:"ajaxServlet1111" , // 请求路径
	                type:"POST" , //请求方式
	                //data: "username=jack&age=23",//请求参数
	                data:{"username":"jack","age":23},
	                success:function (data) {
	                    alert(data);
	                },//响应成功后的回调函数
	                error:function () {
	                    alert("出错啦...")
	                },//表示如果请求响应出现错误，会执行的回调函数
	
	                dataType:"text"//设置接受到的响应数据的格式
	            });

function $ajax({type = "get", url, data, success, error}){
                var xhr = null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(error){
                    xhr = new ActiveXObject("Microsoft.XMLHTTP")
                }
                
                if(type == "get" && data){
                    url += "?" + querystring(data);
                }

                xhr.open(type, url, true);

                if(type == "get"){
                    xhr.send();
                }else{
                     //设置提交数据格式
                    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
                    data ? xhr.send(querystring(data)) : xhr.send();
                }

 

2. $.get()：发送get请求

* 语法：$.get(url, [data], [callback], [type])
				* 参数：
					* url：请求路径
					* data：请求参数
					* callback：回调函数
					* type：响应结果的类型

 3. $.post()：发送post请求

* 语法：$.post(url, [data], [callback], [type])
				* 参数：
					* url：请求路径
					* data：请求参数
					* callback：回调函数
					* type：响应结果的类型

---