当前位置：文档之家 › 菜鸟的Ajax笔记

菜鸟的Ajax笔记

  • 格式：doc
  • 大小：53.50 KB
  • 文档页数：12

菜鸟的Ajax笔记——简介Ajax的主要作用就是不刷新页面更新页面的内容，也就是异步传输。

Ajax的百度百科。

用来显示Ajax响应的div。

Ajax听起来很厉害，但是用起来其实很简单。

下面就是一段使用Ajax的简单示例。

function ajaxRequest(){var req = false;if(window.XMLHttpRequest) {var req = new window.XMLHttpRequest();} else if (window.ActiveXObject) {var req = new window.ActiveXObject('Microsoft.XMLHTTP');}if(!req) return false;req.onreadystatechange = callback;req.open('GET','ajax/ajaxTest.txt',true);req.setRequestHeader('Accept-Language','zh-cn');req.send(null);function callback(){switch (req.readyState) {case 1://alert('Loading');break;case 2://alert('loaded');break;case 3://alert('Interactive');break;case 4:if (req.status && req.status == 200){var str = req.responseText;document.getElementById('test').innerHTML = str;}break;}}}function addEventSimple(obj,evt,fn){if(obj.addEventListener){obj.addEventListener(evt,fn,false);}else if(obj.attachEvent){obj.attachEvent('on'+evt,fn);}}addEventSimple(document,'dblclick',ajaxRequest);代码的最后部分给document添加一个双击的响应函数，当文档被双击的时候就调用ajaxRequest函数，也就是负责发送Ajax请求的函数。

ajaxRequest函数中，第一步就是创建一个XMLHttpRequest对象，代码如下，由于IE和其它浏览器支持的方式不太一样，所以会试图使用使用两个方法来创建这个对象。

var req = false;if(window.XMLHttpRequest) {var req = new window.XMLHttpRequest();} else if (window.ActiveXObject) {var req = new window.ActiveXObject('Microsoft.XMLHTTP');}if(!req) return false;第二步是设置XMLHttpRequest对象的状态变化响应函数。

req.onreadystatechange = callback;下面是发送Ajax请求了。

req.open('GET','ajax/ajaxTest.txt',true);req.send(null);最后就可以编写状态变化响应函数了：function callback(){switch (req.readyState) {case 1://alert('Loading');break;case 2://alert('loaded');break;case 3://alert('Interactive');break;case 4:if (req.status && req.status == 200){var str = req.responseText;document.getElementById('test').innerHTML = str;}break;}}函数的作用就是将返回的字符串添加到页面开头id为test的div内。

双击这个文档就可以看到效果。

XMLHttpRequest对象Ajax的核心就是XMLHttpRequest对象。

readyState表示XMLHttpRequest对象的当前状态，可取值为0-4，共5个状态。

∙0 ："未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。

∙ 1 ："发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。

∙ 2 ："发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。

∙ 3 ："正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。

∙ 4 ："已加载"状态；此时，响应已经被完全接收。

onreadystatechange当readyState属性变化的时候会调用的函数。

responseText响应的文本内容。

当readyState值为0、1或2时，responseText包含一个空字符串。

当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。

当readyState为4(已加载)时，该responseText包含完整的响应信息。

responseXMLXML响应；Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml 结尾。

如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。

statusHTTP状态代码。

仅当readyState值为3(正在接收中)或4(已加载)时，该属性才可用。

当readyState的值小于3时试图存取status的值将引发一个异常。

statusTextHTTP状态的文本；并且仅当readyState值为3或4才可用。

当readyState为其它值时试图存取statusText属性将引发一个异常。

abort()取消当前请求。

把XMLHttpRequest对象复位到未初始化状态。

open()open(method,url,async,username,password)方法初始化一个XMLHttpRequest对象。

method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。

url参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URL。

async参数为布尔值，指定请求是否异步，默认值为true，即异步。

该方法把XMLHttpRequest对象的readyState属性设置为1。

setRequestHeader()setRequestHeader(header，value)设置请求的头部信息。

必须在调用open()方法后调用这个方法（当readyState值为1时）。

send()send([content])把请求发送到服务器。

content函数可选，是要发送到服务器的内容，通常在POST方法的时候使用。

该方法把XMLHttpRequest对象的readyState属性的值设置为2。

getResponseHeader()getResponseHeader(header，value)方法用于检索响应的头部值。

仅当readyState值是3或4getAllResponseHeaders()该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部。

处理Ajax响应1——innerHTML学会了Ajax的核心，再来做几个例子，使用innerHTML将服务器响应的内容添加到页面，响应的格式是纯文本，也就是使用XMLHttpRequest对象的responseText属性。

效果如下，只要点击那几个按钮就可以分别向服务器发送三个不同的Ajax请求。

用Ajax请求段文字用Ajax请求一个table用Ajax从豆瓣取得封面图片JavaScript代码分析首先，这个需要发送三次请求，所以我们把可以重用的代码编写到一个函数中，这个函数的任务就是设置XMLHttpRequest对象，初始化必要的属性。

代码很大程度上参考了《Ajax基础教程》和《AdvancED DOM Scripting》。

function createRequest(options){var req = false;if(window.XMLHttpRequest) {var req = new window.XMLHttpRequest();} else if (window.ActiveXObject) {var req = new window.ActiveXObject('Microsoft.XMLHTTP');}if(!req) return false;req.onreadystatechange = function(){if (req.readyState ==4 && req.status == 200){options.listener.call(req);}};req.open(options.method,options.url,true);return req;}createRequest只接受一个options参数，它是一个对象，返回XMLHttpRequest对象。

参数options可能是这样一个字面量对象：var options = {url:'ajax/strTest.txt',listener:callback,method:'GET'}url表示要请求的文件地址，listener会被作为onreadyStateChange，method作为open的参数。

这个对象比较简单，仅仅是“刚好够用”的程度，应该还需要扩展。

合集下载

Ajax菜鸟学习系列2-核心对象XMLHttpRequest

Ajax菜鸟学习系列2-核心对象XMLHttpRequest

XMLHttpRequest的杀手锏XMLHttpRequest 对象用于在后台与服务器交换数据，可以不需要重新加载页面而达到更新网页局部的目的，根据Ajax的定义（是一种在无需重新加载整个网页的情况下，能够更新局部网页的技术）可知，该对象是Ajax的核心。

用户名校验，两种方式实现传统方式：当点击“检验”按钮时，跳转到另一个页面（代码见Classic.html、ClassicServer.java后台代码不是重点能看懂就行）Classic.html<html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body>校验用户名是否存在的例子<br/><form action="ClassicServer" method="GET">用户名：<input type="text" name="name"/> <input type="submit" value="检验"/></form></body></html>ClassServer.javaimport java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/**** @author TCH*/public class ClassicServer extends HttpServlet {/*** Processes requests for both HTTP* <code>GET</code> and* <code>POST</code> methods.** @param request servlet request* @param response servlet response* @throws ServletException if a servlet-specific error occurs* @throws IOException if an I/O error occurs*/protected void processRequest(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {try{response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();String old = request.getParameter("name");if(old == null || old.length() == 0){out.println("用户名不能为空");} else{String name = new String(old.getBytes("ISO8859-1")); if(name.equals("wangxingkui")){out.println("用户名[" + name + "]已经存在，请使用其他用户名");} else{out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册");}}out.println("<br/><ahref=\"classic.html\">返回校验页面</a>");} catch(Exception e){e.printStackTrace();}}/*** Handles the HTTP* <code>GET</code> method.** @param request servlet request* @param response servlet response* @throws ServletException if a servlet-specific error occurs* @throws IOException if an I/O error occurs*/@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {processRequest(request, response);}/*** Handles the HTTP* <code>POST</code> method.** @param request servlet request* @param response servlet response* @throws ServletException if a servlet-specific error occurs* @throws IOException if an I/O error occurs*/@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {processRequest(request, response);}/*** Returns a short description of the servlet.** @return a String containing servlet description*/@Overridepublic String getServletInfo() {return "Short description";}// </editor-fold>}ajax方式：校验过程中，始终在一个页面，只是页面的反馈内容更新了。

ajax基本知识

ajax基本知识

ajax的基本知识以下是关于 AJAX 的基本知识：1. 异步通信：AJAX 的核心特点是异步通信，意味着网页可以在不等待服务器响应的情况下继续执行其他操作。

这有助于提高用户界面的响应速度。

2. XMLHttpRequest对象：在 JavaScript 中，使用 XMLHttpRequest 对象来实现 AJAX 请求。

该对象可以向服务器发送请求并处理响应。

3. HTTP请求：通过 AJAX，可以使用不同的HTTP请求方法与服务器通信，主要有 GET 和 POST。

GET 用于从服务器获取数据，而 POST 用于向服务器提交数据。

4. 事件处理：通过监听 XMLHttpRequest 对象的事件，可以在请求的不同阶段执行特定的操作，例如，在请求成功时执行一个函数。

5. 数据交换格式：AJAX 可以使用多种数据格式来交换信息，包括XML、JSON、HTML 等。

JSON 是常用的数据格式，因为它易于解析和处理。

6. 安全性：由于 AJAX 请求是通过 JavaScript 发起的，跨站点请求伪造（CSRF）是一个安全问题。

需要采取措施来确保请求的安全性。

7. 跨域请求：由于浏览器的同源策略，不能直接向不同域的服务器发送 AJAX 请求。

要实现跨域请求，可以使用跨域资源共享（CORS）或代理服务器等方法。

8. 框架和库：虽然可以使用原生 JavaScript 来实现 AJAX，但也有许多流行的 JavaScript 框架和库，如jQuery、Axios、Fetch 等，可以简化 AJAX 请求的处理。

9. 错误处理：在 AJAX 请求中，需要考虑到网络错误、服务器错误以及请求超时等情况，并进行适当的错误处理。

Ajax的知识点总结

Ajax的知识点总结

Ajax的知识点总结1.ajax是什么及其工作原理Ajax由html、javascript技术、dhtml和DOM组成这个方法可以将web界面转化成交互性的ajax应用程序2.ajax中核心对象Ajax中最核心的对象是XMLHttpRequest,创建的方法是xmlHttp=new XMLHttpRequest();xmlHttp=new ActiveXObject(‘Microsoft.XMLHTTP’);对于规范的js支持的浏览器来件是没错的，所以恰恰相反IE就不支持，所以我们只能做一个判断再创建一个IE支持的，判断的方法var xmlHttp;//自定义变量function S_xmlHttprequest(){if(window.ActiveXObject){xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');}else if(window.XMLHttpRequest){xmlHttp = new XMLHttpRequest();//创建对象} }3.XMLHttpRequest对象的相关方法打开请求XMLHttpRequest.open(传递方式，地址，是否异步请求);异步请求的值是布尔值，true 和false准备就绪执行XMLHttpRequest.onreadystatechange获取执行结果XMLHttpRequest.responseText4.方法XMLHttpRequest.readyState的五种状态XMLHttpRequest.readyState==状态（有五种状态）0:请求未初始化，还没有调用open()1:请求已经建立，但是还没有发送，还没有调用send()2:请求已发送，正在处理中(通常现在可以从响应中获取内容) 3:请求在处理中；通常响应中已有部分数据可用了，没有全部完成4:响应已完成；您可以获取并使用服务器的响应了5.方法XMLHttpRequest.statue常见的几种状态XMLHttpRequest.status==100---客户必须继续发出请求101---客户要求服务器根据请求转换HTTP协议版本200---成功201---提示知道新文件的URL300---请求的资源可在多处得到301---删除请求数据404---没有发现文件、查询或URL500---服务器产生内部错误6.PHP等待函数sleep（）Sleep()可以理解为等待函数或睡眠函数，执行到该函数根据设置的时间再继续执行下去Sleep(时间：秒)7.HTML的几种触发Onblur 事件会在对象失去焦点时发生Onchange 事件会在域的内容改变时发生Onclick 事件会在对象被点击时发生Onfocus事件在对象获得焦点时发生Onkeydown事件会在用户按下一个键盘按键时发生Onkeypress事件会在键盘按键被按下并释放一个键时发生Onkeyup事件会在键盘按键被松开时发生Onmousedown事件会在鼠标按键被按下时发生Onmousemove事件会在鼠标指针移动时发生Onmouseout事件会在鼠标指针移出指定的对象时发生Onmouseup事件会在鼠标按键被松开时发生。

AJAX新手快速入门

AJAX新手快速入门


一 AJAX 我也行
1.0 缘起
我是一个勤奋的 Blogger，坚持不懈的写 Blog，让我有了很多的收获。比如 天南地北的朋友，比如千奇百怪的朋友，比如志同道合的朋友。 不时会有朋友加 我的 MSN，也不时会有一些有趣的对话、甚至诡异的对话。 但是，最为诡异的对话，是发生在 2005 年 11 月的某一天。一个叫 Yeka 的 朋友在 MSN 上跟我 hi 了一下。 Yeka：hi，你好，我是博文视点的。 我：你好，什么事呀 Yeka：想请你写一本书，看看你有没有兴趣。 我： Yeka：有朋友向我们推荐你的，我们也觉得你的文笔不错。 我：是什么书呀？（内心颇有些得意啊 Yeka：一本关于 AJAX 的新手入门的书。 我： （ 我的 朋友 ， 难 道这个 推荐 我的 朋友 ，不知道我不 懂 AJAX ）
的吗？八成是要害我吧！） 我：是谁呀。 Yeka：熊节，还有孟岩。 我：……（无语中……照理说，他们应该了解我的呀，怎么会推荐我来写 书呢？而且还是 AJAX 的书。）
可悲啊，我其实是一个意志不坚定的同志，经不起 Yeka、孟岩他们几个的 撺掇，我也就跃跃欲试了。内心里想着，AJAX 嘛，新出来的技术，能有多难，
对于 AJAX 本质的理解； 对于整个 AJAX 以及相关技术地图的理解； 对于 AJAX 编程开发所需要的很多技巧、手段的掌握； 几乎是不可能的。 如果没有（ N 多需要感谢的人）的（ N 多方面的帮助），我们这本书，也 不可能以现在这样的深度，以（N 个月）内完成的速度，送到读者的面前。
希望这本书，能够对大家快速学习 AJAX，有所帮助。
写一本新手入门嘛，也不用写得太深的。 现在拿在你手里的这本书，就是我的处女作了——应该叫我们，就像你在 封面上看到的那样，有三个人，这个故事有点复杂——这是一本关于 AJAX 的 书，也是一本关于我如何写出 《AJAX——新手快车道》 这样一本书的书。 对于我 来说，这既是一次极限的写作经历，也是一次极限的学习经历。 其中的刺激，让我们一起来领略吧，Let’s GO！