美文网首页
AJAX的奥秘(1)

AJAX的奥秘(1)

作者: 迪迪酱OvO | 来源:发表于2018-11-27 23:47 被阅读0次

至于今天为什么不继续学习Spring boot呢

呜呜呜因为我发现我基础太差了 还是好好学习基础8。

叭叭了个叭叭叭??

开始学习AJAX。

首先要知道XMLHttpRequest 是 AJAX 的基础(俺知道了!!!)

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

首先了解创建 XMLHttpRequest 对象的语法:

```

var xmlhttp;

xmlhttp=new XMLHttpRequest();

```

XMLHttpRequest 对象用于和服务器交换数据。

处于 onreadystatechange 事件中的就绪状态时执行的函数:

```

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

  }

xmlhttp.open("GET","test1.txt",true);

xmlhttp.send();

```

那如果小可爱们要将请求发送到服务器,需要使用XMLHttpRequest 对象的 open() 和 send() 方法

```

xmlhttp.open("method","url",async);

```

⑴.method:请求的类型为GET 或 POST

那小可爱们怎么选择这两个类型呢???

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

        ①无法使用缓存文件(更新服务器上的文件或数据库)

        ②向服务器发送大量数据(POST 没有数据量限制)

        ③发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

⑵.url:文件在服务器上的位置

⑶.async:true(异步)或 false(同步)----好像都是使用 async=true。

```

xmlhttp.send(string);

```

string:仅用于 POST 请求,GET请求时不需要啦。

如果要获得来自服务器的响应,需要使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText获得字符串形式的响应数据。

responseXML获得 XML 形式的响应数据。

关于onreadystatechange 事件(话说我才知道404是这样显示出来的)

当请求被发送到服务器时,我们需要执行一些基于响应的任务。

每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成,且响应已就绪

status:

200: "OK"

404: 未找到页面

啦啦啦啦。

当我们的网站上有多个AJAX任务时,小可爱们应该编写一个标准的函数来创建 XMLHttpRequest 对象,并为每个 AJAX 任务调用该函数。

总之就是写一个标准函数可以创建对象然后可以一直回调嘻嘻嘻,省事啊胖友们!!!

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务:

```

<script type="text/javascript">

var xmlhttp;

function loadXMLDoc(url,cfunc)

{

      xmlhttp=new XMLHttpRequest();

      xmlhttp.onreadystatechange=cfunc;

      xmlhttp.open("GET",url,true);

      xmlhttp.send();

}

function myFunction()

{

loadXMLDoc("/ajax/test.txt",function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("div1").innerHTML=xmlhttp.responseText;

    }

  });

}

</script>

</head>

<body>

<div id="div1"><h2>注意!</h2></div>

<button type="button" onclick="myFunction()">俺要变身了</button>

```

这样点击按钮后注意!就直接变成俺要变身了嘻嘻(˙︶˙)

今天的学习就到此结束了。

开心

个屁。

相关文章

  • AJAX的奥秘(1)

    至于今天为什么不继续学习Spring boot呢 呜呜呜因为我发现我基础太差了 还是好好学习基础8。 叭叭了个叭叭...

  • AJAX的奥秘(2)

    今天是个不那么美好的一天。 但是学习不能停。 今天看教程讲的是AJAX ASP/PHP的实例,但是我对PHP的掌握...

  • ajax学习笔记

    Ajax学习笔记 Ajax简介 1. Ajax是什么? Ajax : Asynochronous javascri...

  • Ajax详解

    一、Ajax概述 1、Ajax介绍 (1)AJAX全称:Asynchronous: 异步(默认true) syn...

  • ajax

    1、什么是ajax? 2、ajax的原理 3、ajax的核心对象 4、ajax的优点: ajax的缺点: 被jqu...

  • Do you konw Ajax?

    1.ajax 的介绍 ajax 是 Asynchronous JavaScript and XML的简写,ajax...

  • AJAX、Servlet允许跨域请求

    1.AJAX 2.Servlet允许跨域请求 1.AJAX AJAX = Asynchronous JavaSc...

  • ajax简介及JS写原生ajax

    ajax 1.什么是ajax ajax 的全称是Asynchronous JavaScript and XML,其...

  • ajax

    1,ajax的全称及什么是ajax ajax全称: Asynchronous Javescript and Xm...

  • Ajax (Asynchronous JavaScript An

    ajax是什么?如何使用ajax? 1. AJAX的全称是Asynchronous JavaScript and ...

网友评论

      本文标题:AJAX的奥秘(1)

      本文链接:https://www.haomeiwen.com/subject/oamgqqtx.html