Ajax学习心得

最新推荐文章于 2023-04-14 09:44:34 发布

午夜玫瑰钻

最新推荐文章于 2023-04-14 09:44:34 发布

阅读量608

点赞数

分类专栏：前端Javascript相关操作说明文章标签：存储 cookie ajax string

本文链接：https://blog.csdn.net/gujinapenggu5/article/details/50472272

版权

前端Javascript相关操作说明专栏收录该内容

48 篇文章 0 订阅

订阅专栏

自己以前一直对Ajax的认识不是很清楚，感觉这一块内容还是比较难以理解的，但是当自己在学习了一段时间java web中心看Ajax，自己对这一块的技术有了新的认识。简单来说就是http中的一个reques和一个response对象。
     首先ajax不是一门边长语言，而是一种技术而且，因为这种技术和平常人民理解的前端技术有所差异，和后台数据内容交互操作。
     一 .XMLHttpRequest 是 AJAX 的基础。
          XMLHttpRequest 是浏览器的内建对象。
-------------------------------------------------------------------------------------------------------
//用于兼容浏览器版本，主要是兼容IE6
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

-------------------------------------------------------------------------------------------------------
二.get请求
-------------------------------------------------------------------------------------------------------
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.open("GET","/ajax/demo_get.asp",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" οnclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>
---------------------------------------------------------------------------------------------------------
ajax 的主要两个内力值方法就是open()和send()
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)
将请求发送到服务器。
string：仅用于 POST 请求
二.post请求
-------------------------------------------------------------------------------------------------------
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","/ajax/demo_post2.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" οnclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>

---------------------------------------------------------------------------------------------------------
setRequestHeader(header,value)
向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
send():中的内容是向服务器传递的参数内容。上面的代码中传递的的两个参数是fname和lname
二.同步和异步
-------------------------------------------------------------------------------------------------------
     一般情况下使用ajax技术都会讲open()的第三个参数设置为true。表示ajax为异步执行。通过ajax的异步执行原理，JavaScript 无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理。当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数。而在同步执行时，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
上面的方法都是异步执行，相对来说同步执行的代码简单一些。
-------------------------------------------------------------------------------------------------------
     function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","/ajax/test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
-------------------------------------------------------------------------------------------------------
四. 获取服务器响应：

服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
-------------------------------------------------------------------------------------------------------
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("title");
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("myDiv").innerHTML=txt;
    }
  }
xmlhttp.open("GET","/example/xmle/books.xml",true);
xmlhttp.send();
}
-------------------------------------------------------------------------------------------------------
上面通过服务器端得到的数据是XML，需要通过方法自己想要的数据充xml中提取出来。

五.Ajax 状态
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
属性描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status
200: "OK"
404: 未找到页面
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

5.1 使用callback函数内容

callback 函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
-------------------------------------------------------------------------------------------------------
用这种方法可以让自己代码看起来更加简单和有条理。
<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)//loadXMLDoc 方法设置两个参数，分别是url和cfunc
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{//loadXMLDoc传入像个参数，其实就是调用了上面设置要的xmlhttp.onreadystatechange= 将原来的代码变得更加简洁
loadXMLDoc("/ajax/test1.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" οnclick="myFunction()">通过 AJAX 改变内容</button>

</body>
</html>
-------------------------------------------------------------------------------------------------------
这是以后需要常用的ajax使用方法内容。

对ajax的技术的人不但要了解前端知识，又因为ajax技术涉及到和后台的交互，所以当了解一些后台技术的时候对于理解ajax很有帮助。

午夜玫瑰钻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习心得

自己以前一直对Ajax的认识不是很清楚，感觉这一块内容还是比较难以理解的，但是当自己在学习了一段时间java web中心看Ajax，自己对这一块的技术有了新的认识。简单来说就是http中的一个reques和一个response对象。首先ajax不是一门边长语言，而是一种技术而且，因为这种技术和平常人民理解的前端技术有所差异，和后台数据内容交互操作。一 .XMLHttpR
复制链接

扫一扫