微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Ajax

分类：Ajax作者：编程之家AI导航网

一:什么是Ajax

Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml。也就是异步请求更新技术。Ajax是一种对现有技术的一种新的应用，不是一门新语言。它是用JavaScript编写。与xml的关系就是可以读取和返回xml文件。

二:Ajax中的对象和方法说明

Ajax的核心对象就是xmlHttpRequest

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

1：方法

xmlHttpRequst对象利用send()和open()方法与服务器进行交互。

open(method,url,async)

  • method：请求的类型；GET或POST
  • url：文件在服务器上的位置
  • async：true（异步）或false（同步）

send(string)

  • string：仅用于POST请求

如果是post请求，必须使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中设置发送的数据：

[javascript] view plain copy
  1. xmlhttp.open("POST","ajax_test.asp",true);
  2. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  3. xmlhttp.send("fname=Bill&lname=Gates");

2：属性

readyState

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪

State

  • 200: "OK"
  • 404: 未找到页面

responseText

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

responseXML

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

onreadystatechange

三:Ajax运行原理(为什么要用Ajax)



ajax通过xmlhttpRequest对象执行操作，其中xmlhttpRequest对象是在浏览器中内置的一个对象

其运行原理就相当于创建了一个请求代理，通过代理去完成与服务器的交互，交互的过程中客户不需要等待，还可以进行其它的工作，交互完成以后，代理再将交互的结果返回给客户页面。

第一步:创建xmlHttpRequest对象，每个浏览器的创建不是都相同。

copy
    varxmlhttp;
  1. if(window.XMLHttpRequest)
  2. {//IE7+,Firefox,Chrome,Opera,Safari创建方式
  3. xmlhttp=newXMLHttpRequest();
  4. }
  5. else
  6. //IE6,IE5创建方式
  7. newActiveXObject("Microsoft.XMLHTTP");
  9. }

通常情况下为了兼容所有浏览器，每个都要写上。

第二步：设置open（）方法和setRequestHeader()方法参数。

将请求方式，请求目的地址，和请求类型设置到open方法中，如果是post请求，则需要设置setRequestHeader()参数

第三步：发送执行

利用send方法，与服务器真正的交互执行

第四步：获得执行结果

首先判断执行是否完成，然后通过js操作dom元素，将返回的responseText返回到页面

copy
    xmlhttp.onreadystatechange=function()
  1. {
  2. //判断是否发送成功，是否找到请求页面等
  3. if(xmlhttp.readyState==4&&xmlhttp.status==200)
  4. {
  5. //操作页面元素
  6. document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  7. }
  8. }

四:Ajax实例(焦点离开验证用户是否存在)

利用ajax在焦点离开的时候判断注册的用户是否存在

copy
    varxmlHttp;//声明xmlHttp对象
  1. //实例化xmlHttpRequest对象
  2. functioncreateXMLHttpRequest(){
  3. //表示当前浏览器不是ie,如ns,firefox
  4. if(window.XMLHttpRequest){
  5. xmlHttp= }elseif(window.ActiveXObject){
  6. //input失去焦点事件onblur（），调用这个js方法验证
  7. functionvalidate(field){
  8. if(trim(field.value).length!=0){
  9. //创建XMLHttpRequest
  10. createXMLHttpRequest();
  11. //每次请求的URL地址不同，利用时间产生不同URL地址，可以防止缓冲造成问题
  12. varurl="user_validate.jsp?userId="+trim(field.value)+"×tamp="+newDate().getTime();
  13. xmlHttp.open("GET",153); font-weight:bold; background-color:inherit">true);
  14. //方法地址，处理完成后自动调用，回调
  15. xmlHttp.onreadystatechange=function(){//匿名函数
  16. if(xmlHttp.readyState==4){//Ajax引擎初始化成功
  17. if(xmlHttp.status==200){//http协议成功
  18. document.getElementById("userIdSpan").innerHTML="<fontcolor='red'>"+xmlHttp.responseText+"</font>";
  19. }else{
  20. alert("请求失败，错误码="+xmlHttp.status);
  21. };
  22. //将参数发送到Ajax引擎
  23. xmlHttp.send(null);
  24. else{
  25. document.getElementById("userIdSpan").innerHTML="";
  26. }
页面部分代码：

[html] copy
    <tdwidth="78%">
  1. inputname="userId"type="text"class="text1"id="userId"
  2. size="10"maxlength="10"onkeypress="userIdOnKeyPress()"value="<%=userId%>"onblur="validate(this)">spanid="userIdSpan"</spantd>

//后台验证方法利用jsp编写

[java] copy
    <%@pagelanguage="java"contentType="text/html;charset=GB18030"
  1. pageEncoding="GB18030"%>
  2. <%@pageimport="com.bjpowernode.drp.sysmgr.manager.*"%>
  3. <%
  4. //可以采用清除缓存的方法，如下
  5. //response.setContentType("text/xml");
  6. //response.setHeader("Cache-Control","no-store");//HTTP1.1
  7. //response.setHeader("Pragma","no-cache");//HTTP1.0
  8. //response.setDateHeader("Expires",0);
  9. //out.println("Hello");
  10. //Thread.currentThread().sleep(3000);
  11. StringuserId=request.getParameter("userId");
  12. if(UserManager.getInstance().findUserById(userId)!=null){
  13. out.println("用户代码已经存在");
  15. %

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native