ajax的基本概念与实现方式
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：MyEclipse 10/Java
作者：陈希雄
撰写时间：2019年07月25日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
关于Ajax：ajax它不是一门语言，而是一种请求方法
1、基本概念：
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
同步与异步：客户端和服务端相互通信的基础上
同步：就是客户端向服务端发送请求时，而这个请求的过程中客户端不可以做其它操作，必须要等待服务端的响应。
异步: 就是客户端向服务端发送请求时，而这个请求的过程中客户端可以做其它操作，不需要等待服务端的响应。
什么是AJAX呢？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
2、实现方式（原生的js实现方式、jqeury实现方式）
1．原生的js实现方式（了解）
//发送异步请求
//1、创建发送核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
console.log(11);
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
console.log(1122);
}
//2.建立连接
/* 参数：
1.请求方式：GET 或 POST
*get请求：请求参数可以直接拼接在URL后面，send方法为空参
*post请求：请求参数要定在send方法中
2.请求的URL:
3.同步或者异步请求：true（异步）或同步（false） */
xmlhttp.open("GET","ajaxServlet?oper=6666",true);
//3.发送请求
xmlhttp.send();
//4.接收并处理来自服务器的响应结果
//获取方式： responseText 获得字符串形式的响应数据。 responseXML 获得 XML 形式的响应数据。
//什么时候获取呢？当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时，触发事件 onreadystatechange(存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。)
xmlhttp.onreadystatechange=function()
{
//判断readyState的就绪状态是否为4，判断status响应状态码是否为200
/* readyState的就绪状态：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
/* status的响应状态码
200: "OK"
404: 未找到页面
*/
if (xmlhttp.readyState==4&& xmlhttp.status==200)
{
alert(xmlhttp.responseText);
}
2.jqeury实现方式
1、$.ajax()
//使用$.ajax()发送请求
$.ajax({
url:"ajaxServlet",//路径
type:"post",//请求方式 （如果不写，默认为get请求）
data:{"oper":"牛逼"},//请求参数、
success:function(data){
alert(data);
},//响应成功后的回调函数
error:function(){//失败
alert("噢噢");
},dataType:"text"//设置接收响应数据的格式
});
2、$.get()
语法： $.get(URL,callback);
$.get("ajaxServlet",{oper:"313"},function(){});
3、$.post()
语法：$.post(URL,data,callback);
$.post("ajaxServlet",{oper:"313"},function(){});
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：MyEclipse 10/Java
作者：陈希雄
撰写时间：2019年07月25日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
关于Ajax：ajax它不是一门语言，而是一种请求方法
1、基本概念：
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
同步与异步：客户端和服务端相互通信的基础上
同步：就是客户端向服务端发送请求时，而这个请求的过程中客户端不可以做其它操作，必须要等待服务端的响应。
异步: 就是客户端向服务端发送请求时，而这个请求的过程中客户端可以做其它操作，不需要等待服务端的响应。
什么是AJAX呢？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
2、实现方式（原生的js实现方式、jqeury实现方式）
1．原生的js实现方式（了解）
//发送异步请求
//1、创建发送核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
console.log(11);
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
console.log(1122);
}
//2.建立连接
/* 参数：
1.请求方式：GET 或 POST
*get请求：请求参数可以直接拼接在URL后面，send方法为空参
*post请求：请求参数要定在send方法中
2.请求的URL:
3.同步或者异步请求：true（异步）或同步（false） */
xmlhttp.open("GET","ajaxServlet?oper=6666",true);
//3.发送请求
xmlhttp.send();
//4.接收并处理来自服务器的响应结果
//获取方式： responseText 获得字符串形式的响应数据。 responseXML 获得 XML 形式的响应数据。
//什么时候获取呢？当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时，触发事件 onreadystatechange(存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。)
xmlhttp.onreadystatechange=function()
{
//判断readyState的就绪状态是否为4，判断status响应状态码是否为200
/* readyState的就绪状态：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
/* status的响应状态码
200: "OK"
404: 未找到页面
*/
if (xmlhttp.readyState==4&& xmlhttp.status==200)
{
alert(xmlhttp.responseText);
}
2.jqeury实现方式
1、$.ajax()
//使用$.ajax()发送请求
$.ajax({
url:"ajaxServlet",//路径
type:"post",//请求方式 （如果不写，默认为get请求）
data:{"oper":"牛逼"},//请求参数、
success:function(data){
alert(data);
},//响应成功后的回调函数
error:function(){//失败
alert("噢噢");
},dataType:"text"//设置接收响应数据的格式
});
2、$.get()
语法： $.get(URL,callback);
$.get("ajaxServlet",{oper:"313"},function(){});
3、$.post()
语法：$.post(URL,data,callback);
$.post("ajaxServlet",{oper:"313"},function(){});
