AJAX学习分享

最新推荐文章于 2023-02-02 13:45:06 发布

开始变得更好

最新推荐文章于 2023-02-02 13:45:06 发布

阅读量103

点赞数

文章标签： ajax 学习 javascript

本文链接：https://blog.csdn.net/m0_56303783/article/details/127142531

版权

1.学习AJAX首先了解什么是AJAX。

AJAX=Asynchronous JavaScript and XML (异步的Javascript和XML)，他是一种动态网页技术。

AJAX最大的优点是在不加载整个页面的情况下，可以与服务器交换数据并更新部分网页的内容。

2.AJAX工作的原理

浏览器端发生某个事件之后，浏览器创建XMLHtppRequest对象并发送HttpRequest给服务器，服务器处理HttpRequest，创建响应并将数据返回浏览器，浏览器使用JS处理返回的数据，并更新页面内容。

3.创建XMLHttpRequest对象

XMLHttpRequest是AJAX的基础

3.1XMLHttpRequest对象

所有的现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）

3.2创建XMLHttpRequest对象

创建XMLHttpRequest对象的语法：

variable=new XMLHttpRequest();

老版本的Internet Exporer（IE5和IE6）使用ActiveX对象

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括IE5和IE6，请检查浏览器是否支持XMLHttpRequest对象。如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveXObjext：

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

4.向服务器发送请求

4.1向服务器发送请求

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

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

4.2使用GET还是POST?

与POST相比，GET更简单也更快，并且在大部分情况下都能使用，然而在下面几种情况下使用POST请求：

不愿使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST没有数据量限制）
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

4.3GET请求

一个简单的GET请求

xmlhttp.open("GET","try/ajax/demo_get.php",true);

xmlhttp.send();

在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","try/ajax/demo_get.php?t="+Math.random(),true);

xmlhttp.send();

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","try/ajax/demo_get2.php?fname=Henry&lname=Ford",true); xmlhttp.send();

4.4POST请求

一个简单的post请求

xmlhttp.open("POST","try/ajax/demo_post.php",true);
xmlhtp.send();

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

4.5url-服务器上的文件

open上的url参数是服务器上的文件的地址：

xmlhttp.open("GET","ajax_test.html",ture);

该文件可以是任意类型的文件，或者是服务器上的脚本文件，比如.asp或.php

4.6异步-True或False

AJAx指的是异步JavaScript 和XML（Asynchronous JavaScript and XML）。

XMLHttpRequest对象如果要用AJAX的话，其open（）方法的async参数必须设置为true：

xmlhttp.open("GET","ajax_test.html",true);

5.服务器响应

5.1服务器响应

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

5.2responseText属性

responseText属性返回字符串形式的响应，可以这样写：

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

5.3responseXML属性

如果服务器响应的是XML属性，而且需要作为XML对象解析，使用responseXML属性：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsBytagName("ARTIST");
for(i=0;i<x.length;i++){
txt=txt+x[i].childNodes[0].nodeValue+"</br>";
document.getElementById("myDiv"),innerHTML=txt;
}

6.onreadystatechange事件

6.1onreadystatechange事件

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

下面是XMLHttpRequest对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面