Ajax 知识储备

最新推荐文章于 2024-04-30 11:27:22 发布

ybbinRush

最新推荐文章于 2024-04-30 11:27:22 发布

阅读量121

点赞数

分类专栏： ajax javascript html 文章标签： ajax jquery

本文链接：https://blog.csdn.net/weixin_44279798/article/details/104119615

版权

javascript 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

ajax

4 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

文章目录

1 认识Ajax
- 1.1 Ajax
- 1.2 Ajax交互与传统交互比较
2 Ajax核心知识

1 认识Ajax

1.1 Ajax

1，Ajax 是一种网页开发技术，（AsynchronousJavascript +XML）异步 JavaScript 和 XML；
2，Ajax 是异步交互，局部刷新；
3，Ajax 能减少服务器压力；
4，Ajax 能提高用户体验

1.2 Ajax交互与传统交互比较

传统交互：网页整体刷新，服务器压力大，用户体验不好；
Ajax 交互：局部刷新，服务器压力小，用户体验好

2 Ajax核心知识

2.1 XMLHttpRequest对象创建

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

 function loadName(){
  var xmlHttp;
  if(window.XMLHttpRequest){
   xmlHttp=new XMLHttpRequest();
  }else{
   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

2.2 XMLHttpRequest对象请求后台

open(method,url,async) ：打开一个Http请求，但还没有发送请求。
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）

send(string) 向服务器发送HTTP请求并检索后台。send接受的参数一般是一个字符串或者是一个DOM对象
将请求发送到服务器。 string：仅用于 POST 请求。

GET 还是 POST？与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

当使用POST方法，则需要设置XMLHttpRequest对象的Content-Type首部，一般如下所示：
setRequestHeader(header,value) 向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);

异步 -True 或 False？
AJAX 指的是异步 JavaScript 和 XML（AsynchronousJavaScript andXML）。
为 True 的话，表示的是异步，异步表示程序请求服务器的同时，程序可以继续执行；能提高系统的运行效率；
为 False 的话，表示同步，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。 我们一般都是用 True；

一个小栗子
前台页面：NewFile.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
 function loadName(){
  var xmlHttp;
  if(window.XMLHttpRequest){
   xmlHttp=new XMLHttpRequest();
  }else{
   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlHttp.open("get","getAjaxName?name=jack&age=11",true);
  xmlHttp.send()；
  //另外一种post方法传参数的方式！！！***********`在这里插入代码片`
  //xmlHttp.open("post", "getAjaxName", true);
  //xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  //xmlHttp.send("name=jack&age=11");

 }
 
</script>
</head>
<body>
<div style="text-align:center">
<input type="button" value="Ajax获取数据" name="name" id="name" οnclick=loadName() />
</div>
</body>
</html>

后台：getAjaxNameServelet.java核心代码

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  String name=request.getParameter("name");
  String age=request.getParameter("age");
  System.out.println(name);
  System.out.println(age);
  response.setContentType("text/html;charset=utf-8");
  PrintWriter out =response.getWriter();
  out.print("Ajax返回的文本");
  out.flush();
  out.close();
 }

结果展示：
后台控制台打印
浏览器响应返回文本查看：
响应文本

2.3 XMLHttpRequest 对象响应服务器（下面加粗的是XMLHttpRequest对象的属性）

onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：
onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status
200:“OK” ，说明已经找到url了，表示请求已经接受。
404: 未找到页面
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText （获取文本）或 responseXML 属性。
属性描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。（了解即可）

原理代码理解：

<title>状态码理解</title>
<script type="text/javascript">
 function loadName(){
  var xmlHttp;
  if(window.XMLHttpRequest){
   xmlHttp=new XMLHttpRequest();
  }else{
   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  alert("readState状态："+xmlHttp.readyState+";status状态："+xmlHttp.status);
  xmlHttp.onreadystatechange=function(){
   //readyState每次改变就会调用这个funciton，所以会有多次弹出提示框
   alert("readState状态："+xmlHttp.readyState+";status状态："+xmlHttp.status);
   if(xmlHttp.readyState==4 && xmlHttp.status==200){
    alert(xmlHttp.responseText);
    document.getElementById("name").value=xmlHttp.responseText;
   }
  };
  xmlHttp.open("get","getAjaxName?name=jack&age=11",true);
  xmlHttp.send();
 }
 
</script>
</head>
<body>
<div style="text-align:center">
<input type="button" value="Ajax获取数据"  onclick=loadName() />
<input type="text" name="name" id="name">
</div>
</body>

ybbinRush

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax 知识储备

1 认识Ajax1.1 Ajax1，Ajax 是一种网页开发技术，（AsynchronousJavascript +XML）异步 JavaScript 和 XML；2，Ajax 是异步交互，局部刷新；3，Ajax 能减少服务器压力；4，Ajax 能提高用户体验1.2 Ajax交互与传统交互比较传统交互：网页整体刷新，服务器压力大，用户体验不好；Ajax 交互：局部刷新，服务器压力小...
复制链接

扫一扫