AJAX
来源:互联网 发布:快典网藏头诗软件 编辑:程序博客网 时间:2024/06/06 01:50
简介
(1)AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
(2)AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
(3)AJAX 是一种用于创建快速动态网页的技术。
原理
动态页面&静态页面
静态页面:页面固定,页面内数据内容固定写入,每一个具体功能需要一个独立的page来支撑
动态页面:页面page根据数据动态生成,大部分页面由几个固定模板页面来动态生成
同步加载&异步加载
同步加载:页面在加载新的内容时候,整个页面无法进行其他操作,容易导致页面出现假死
异步加载:页面的多个功能操作可以同时执行,而不会互相影响而出现假死状态
AJAX
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
优点
(1)在页面不刷新的情况下异步加载数据
(2)实现页面数据动态更新
(3)实现页面数据局部刷新
实现机制
XMLHttpRequest
XMLHttpRequest对象是AJAX技术的核心对象
属性
0:未初始化。对象已创建,未调用open;
1:open方法成功调用,但Sendf方法未调用;
2:send方法已经调用,尚未开始接受数据;
3:正在接受数据。Http响应头信息已经接受,但尚未接收完成;
4:完成,即响应数据接受完成。
responseText 服务器响应的文本内容 responseXML 服务器响应的XML内容对应的DOM对象 status 服务器返回的http状态码(200、404、500) onreadystatechange 请求状态改变的事件触发器
readyState变化时会调用这个属性上注册的javascript函数
方法
Method:表示http请求方法,一般使用”GET”,”POST”.
url:表示请求的服务器的地址;
asynch:表示是否采用异步方法,true为异步,false为同步;
提供http认证机制需要的用户名和密码,后边两个可以不指定
send(content) 向服务器发出请求,如果采用异步方式,该方法会立即返回
content可以指定为null表示不发送数据,其内容可以是DOM对象,输入流或字符串。
setRequestHeader(header,Value) 设置HTTP请求中的指定头部header的值为value.
此方法需在open方法以后调用,一般在post方式中使用。
实现思路
1、创建核心请求对象XMLHttpRequest
2、打开链接,配置请求信息:open(method,url,asynch)
3、请求发送:send(content)
4、定义回调函数,定义获取反馈消息后的执行操作:onreadystatechange
请求方式
GET
特点
(1)请求需要携带的参数通过open方法第二个参数后面带上
(2)携带参数格式:?param=value¶m=value¶m=value
demo
index.html
//1、兼容性判断 var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"); /* 2、打开连接,配置请求信息 参数1:GET/POST 参数2:后台响应servlet 参数3:true(同步)/ false(异步) */ xhr.open("GET","Servlet?name=cgt&psd=123",true); //3、请求发送 xhr.send(null); //4、定义回调函数 xhr.onreadystatechange = function () { //判断XMLHttpRequest对象状态,若是4则响应数据接收完成 if(xhr.readyState==4){ //判断服务器返回的http状态码,若是200则连接成功 if(xhr.status==200){ //获取服务器响应数据 var result = xhr.responseText; console.log(result); } } }
Servlet
@WebServlet("/Servlet")public class Servlet extends HttpServlet { @Override public void init() throws ServletException { System.out.println("成功连接到Servlet"); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("doGet"); resp.setCharacterEncoding("UTF-8"); resp.getWriter().write("已成功以GET方法连接"); String name = req.getParameter("name"); String psd = req.getParameter("psd"); System.out.println("name="+name); System.out.println("psd="+psd); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("doPost"); resp.getWriter().write("已成功以POST方法连接"); }}
结果
POST
特点
(1)参数不能在url后面携带
(2)参数必须通过send方法后面发送过去,格式:parm=value&parm=value
(3)send方法之前必须还得发送请求头:setRequestHeader
demo
index.html
//1、兼容性判断 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); /* 2、打开连接,配置请求信息 参数1:GET/POST 参数2:后台响应servlet 参数3:true(同步)/ false(异步) */ xhr.open("POST", "Servlet", true); //3、请求头 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4、请求发送 xhr.send("name=cgt&psd=123"); //5、定义回调函数 xhr.onreadystatechange = function () { //判断XMLHttpRequest对象状态,若是4则响应数据接收完成 if (xhr.readyState == 4) { //判断服务器返回的http状态码,若是200则连接成功 if (xhr.status == 200) { //获取服务器响应数据 var result = xhr.responseText; console.log(result); } } }
Servlet
@WebServlet("/Servlet")public class Servlet extends HttpServlet { @Override public void init() throws ServletException { System.out.println("成功连接到Servlet"); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("doGet"); resp.setCharacterEncoding("UTF-8"); resp.getWriter().write("已成功以GET方法连接"); String name = req.getParameter("name"); String psd = req.getParameter("psd"); System.out.println("name="+name); System.out.println("psd="+psd); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("doPost"); resp.setCharacterEncoding("UTF-8"); resp.getWriter().write("已成功以POST方法连接"); String name = req.getParameter("name"); String psd = req.getParameter("psd"); System.out.println("name="+name); System.out.println("psd="+psd); }}
结果
总结
1、前端和后台服务数据交互方式:get和post
(1)get方式提交,所有的参数都会在超链接后面通过?的方式提交过去,多个参数之间通过&符号进行间隔
(2)post方式:参数不能通过超链接携带,而是通过服务器传参
注意:超链接提交数据,统一都是用get方式提交
2、AJAX
post请求与get请求区别:
(1)参数不能在url后面携带
(2)参数必须通过send方法后面发送过去,格式:parm=value&parm=value
(3)send方法之前必须发送请求头:setRequestHeader
- Ajax
- Ajax
- AJAX
- AJAX
- AJAX
- AJAX
- AJAX
- ajax
- ajax
- Ajax
- ajax
- ajax
- AJAX
- Ajax
- Ajax
- Ajax
- ajax
- ajax
- 2017 计蒜客 第五场
- Leecode-Remove Duplicates from Sorted Array
- Java-Unsafe类(一)
- Mac下利用Eclipse编写C/C++
- 文章标题
- AJAX
- Linux学习之二十四(硬盘管理及文件系统管理:fdisk/mke2fs/tune2fs)
- 判断RecycleView是否滑动到底部
- 欢迎使用CSDN-markdown编辑器
- 继承中无参构造的用法
- 性能测试
- python IDE(Integrated Develope Environment集成开发环境)
- centos : yacc&lex gcc cannot find -ll/-lfl
- 543. Diameter of Binary Tree