初识Ajax

1.简介

1. AJAX 是 Asynchronous JavaScript And XML 的简称。直译为，异步的JS和XML。
2. AJAX的实际意义是，不发生页面跳转、异步载入内容并改写页面内容的技术。
3. AJAX也可以简单的理解为通过JS向服务器发送请求。

异步处理

而异步处理指的是我们在浏览网页的同时，通过AJAX向服务器发送请求，发送请求的过程中我们浏览网页的行为并不会收到任何影响，甚至主观上感知不到在向服务器发送请求。当服务器正常响应请求后，响应信息会直接发送到AJAX中，AJAX可以根据服务器响应的内容做一些操作。
使用AJAX的异步请求基本上完美的解决了同步请求带来的问题。首先，发送请求时不会影响到用户的正常访问。其次，即使请求时间过长，用户不会有任何感知。最后，AJAX可以根据服务器的响应信息局部的修改页面，而不需要整个页面刷新。

异步请求对象

XMLHttpRequest对象是AJAX中非常重要的对象，所有的AJAX操作都是基于该对象的。

XMLHttpRequest对象用来封装请求报文，我们向服务器发送的请求信息全部都需要封装到该对象中。

这里需要稍微注意一下，XMLHttpRequest对象并没有成为标准，但是现在的主流浏览器都支持该对象，而一些如IE6的老版本浏览器中的创建方式有一些区别，但是问题不大。

Xhr对象的获取

发送Ajax请求

原生的JavaScript发送Ajax请求共有4步：

1. 创建XMLHttpRequest对象Xhr
2. 设置请求信息（调用open()方法）
3. 发送请求（调用send()方法)
4. 接收响应

Xhr对象的方法的介绍：

1. open(method,url,async)
   open()用于设置请求的基本信息，接收三个参数。

①method

• 请求的方法：get或post
• 接收一个字符串

②url

• 请求的地址，接收一个字符串

③Assync

• 发送的请求是否为异步请求，接收一个布尔值。
• true 是异步请求
• false 不是异步请求（同步请求）

1. send(string)
   send()用于将请求发送给服务器，可以接收一个参数

①string参数

• 该参数只在发送post请求时需要。
• string参数用于设置请求体

1. setRequestHeader(header,value)用于设置请求头

①header参数

• 字符串类型，要设置的请求头的名字
  ②value参数
• 字符串类型，要设置的请求头的值

Xhr对象的属性的介绍：

1. readyState

①描述XMLHttpRequest的状态

②一共有五种状态分别对应了五个数字：

• 0 ：请求尚未初始化，open()尚未被调用
• 1 ：服务器连接已建立，send()尚未被调用
• 2 ：请求已接收，服务器尚未响应
• 3 ：请求已处理，正在接收服务器发送的响应
• 4 ：请求已处理完毕，且响应已就绪。

1. status
   ①请求的响应码

• 200 响应成功
• 404 页面为找到
• 500 服务器内部错误
  … … … …

1. onreadystatechange

①该属性需要指向一个函数
②该函数会在readyState属性发生改变时被调用

1. responseText

获得字符串形式的响应数据。

1. responseXML（用的比较少）
   获得 XML 形式的响应数据。

发送Ajax请求

可以通过$.ajax()方法和$.get()或$.post()f方法发送Ajax请求。其格式分别为：
$.ajax()方法:

$.ajax(url,[settings])
url：必须的。用来设置请求地址
settings中的设置
type：可选的。用来设置请求方式，默认是GET
data：可选的。用来设置请求参数
success：可选的。用来设置一个回调函数，当响应成功之后系统自动调用该函数，
响应数据会以参数的形式传入到该函数中
dateType：可选的。用来设置响应数据的类型，如text、xml、json等
如：

$.ajax({
                url:"${pageContext.request.contextPath }/AjaxServlet",
                type:"get",
                data:"username=admin&age=16",
                success:function(res){
                    //将响应数据设置到span标签中
                    $("#msgSpan").text(res);
                },
                dataType:"text"
            });
        });

//给按钮绑定单击事件
        $("#btnId2").click(function(){
            //通过$.get()/post()方法发送Ajax请求
            /*
                $.get/post(url, [data], [callback], [type])
                    url：必须的。用来设置请求地址
                    data：可选的。用来设置请求参数
                    callback：可选的。用来设置一个回调函数，当响应成功之后系统自动调用该函数，
                            响应数据会以参数的形式传入到该函数中
                    type：可选的。用来设置响应数据的类型，如text、xml、json等
            */
            //设置请求地址
            var url = "${pageContext.request.contextPath }/AjaxServlet";
            //设置请求参数
            var params = "username=admin&age=18";
            $.get(url,params,function(res){
                //将响应数据设置到span标签中
                $("#msgSpan2").text(res);
            },"text");
        });
    });

初识Ajax

原文：https://www.cnblogs.com/zhqin/p/11710730.html