前端之家收集整理的这篇文章主要介绍了
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.f2er.com/ajax/163005.html