Ajax笔记

最新推荐文章于 2024-02-01 15:40:35 发布

Phoenix-mai

最新推荐文章于 2024-02-01 15:40:35 发布

阅读量102

点赞数

分类专栏： Java web 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_43313682/article/details/115340794

版权

Java web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、模式是Ajax

AJAX = 异步 JavaScript 和 XML。

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

在这里插入图片描述

二、Ajax实现步骤

1. 创建对象

var xmlhttp= new XMLHttpRequest();

IE6，IE5S使用的是object请求，其他一般是用request请求

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2. 配置请求方式（post、get）和地址url，链接服务器

xmlhttp.open('get', 'http://www.baidu.com',true);

3. 发送请求

xmlhttp.send();

4. 获取服务端的数据

xmlhttp.onload = function () {
     //用xmlhttp.responseText获取到信息， 打印到log中
     console.log(xmlhttp.responseText);
 }

使用ajax调用readystatechange事件：当请求被发送到服务器时，我们需要执行一些基于响应的操作。当readystatechange改变的时候，就会触发这个事件执行。（使用状态码和结果码来判断）
（1）. readyState：请求的状态，返回的是状态码（0 - 4）：
　　　0（未初始化）open还没有调用、
　　　1（载入）已经调用了send（）正在发送请求、
　　　 2（载入完成）send方法已经完成已经收到了全部的响应内容、
　　　3（解析）正在解析响应内容、
　　　4（完成）响应内容解析完成可以在客户端用了。
（2） responseText：返回请求的内容。
（3） status：返回请求的结果码：返回200（成功）、返回404（未找到）、返回5**（5开头）（服务器错误）

三、Ajax相关实例

实例一（在文本框中输入，输出相应的数据）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    // status：返回请求的结果码
    // readyState：请求的状态，返回的是状态码（0 - 4）
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<h3>在输入框中尝试输入字母 a:</h3>
<form action=""> 
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p> 

</body>
</html>

运行结果：：
在这里插入图片描述

四、Ajax 封装

利用FastJSON解析JSON
需要在lib文件夹下导入fastjson的jar包；

Phoenix-mai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax笔记

一、模式是AjaxAJAX = 异步 JavaScript 和 XML。如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();二、Ajax实现步骤1. 创建对象var xmlhttp= new XMLHttpRequest();IE6，IE5S使用的是object请求，其他一般是用request请求var xmlh
复制链接

扫一扫

专栏目录