AJAX理论知识

一、介绍 AJAX是基于现有的Internet标准 AJAX是基于现有的Internet标准，并且联合使用它们： XMLHttpRequest 对象 (异步的与服务器交换数据) JavaScript/DOM (信息显示/交互) CSS (给数据定义样式) XML (作为转换数据的格式) 二、Ajax的组成元素 1.XMLHttpRequest 是 AJAX 的基础,XMLHttpRequest 对象用于和服务器交换数据 创建：var xhr = new XMLHttpRequest(); 2.如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法： xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); 注意： GET 还是 POST？ 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。 然而，在以下情况中，请使用 POST 请求： 无法使用缓存文件（更新服务器上的文件或数据库） 向服务器发送大量数据（POST 没有数据量限制） 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠 xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);//避免取得的结果是缓存，给url加上唯一的id xmlhttp.send(); 注意： 在xmlHttp.send方法中，如果带了参数则为post,否则为get方式 注意： 异步 - True 或 False？ AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。 XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true： xmlhttp.open("GET","ajax_test.html",true); 【四要素】 var xhr = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET",true); xmlhttp.send(); 【onreadystatechange事件】 readyState： 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 status: 200: "OK" 404: 未找到页面 注意： onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。 function ajaxFun(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status=200){ document.getElementById().innerHTML = xhr.responseText; } } xhr.open("GET","ajax_info.jsp",true); xhr.send(); }

原文地址：https://www.jb51.cc/ajax/163005.html