Ajax

发布时间：2020-12-15 21:26:26 所属栏目：百科来源：网络整理

导读：Ajax AJAX：“Asynchronous JavaScript and XML”，异步的JavaScript和XML。但好像没XML啥事儿，主要就是一堆JavaScript代码。普通的网页请求回执过程（请求响应模式），浏览器发出请求之后要等着浏览器返回请求，期间不能做任何事。 Ajax模式，浏览器将请

Ajax

AJAX：“Asynchronous JavaScript and XML”，异步的JavaScript和XML。但好像没XML啥事儿，主要就是一堆JavaScript代码。

普通的网页请求回执过程（请求响应模式），浏览器发出请求之后要等着浏览器返回请求，期间不能做任何事。

Ajax模式，浏览器将请求发送给Ajax引擎，让其去和服务器请求并且等待返回的数据，浏览器还可以接着向下执行别的操作。

打个比方，传统方式是一个人在干活，ajax是两个人在干活。

Ajax是一个浏览器端的技术，Ajax引擎是由浏览器实现的。Ajax技术的主要目的在于局部交换客户端和服务器之间的数据。能够不用重新载入整个页面来更新资料，也就是Refresh without Reload（轻刷新）。

与服务器之间的沟通，完全是通过JavaScript来实行。因为不用重新载入整个页面，Ajax传送的数据量很小，反应也会很快。注：JavaScript是一门单线程语言，无法指定开启新的线程。

Get方式

新建一个Ajax.jsp，填写代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script> window.onload=function(){ //给按钮注册一个单击事件 document.getElementById('btnClick').onclick=function(){ //1.创建一个XMLHttpRequest对象 var xhr=null; //通过能力检测，在不同浏览器中创建该对象 if(XMLHttpRequest){ xhr=new XMLHttpRequest(); }else if(ActiveXObject){ xhr=new ActiveXObject("Microsoft.XMLHttp"); } //2.设置回调函数 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ document.getElementById('dvTime').innerHTML='当前时间：'+xhr.responseText; } }; //3.初始化请求，告诉xhr对象，使用get还是post请求，要请求哪个地址，是否是异步请求 xhr.open('get','ShowTime.jsp',true); //如果想传递参数的话 //xhr.open('get','ShowTime.jsp?name=eaglezsx&age=22',true); //通过Ajax发起请求，如果需要手动设置请求报文头，则需要在初始化之后（open），在发送请求之前(send) xhr.setRequestHeader('if-modified-since','0');//设置浏览器不使用缓存 //4.开始发起请求 xhr.send();//因为当前使用的是get请求，没有请求报文体，所以传递null参数。 }; }; </script>
</head>
<body>
    <input type="button" id="btnClick" value="获取服务器时间"/>
    <div id="dvTime">
    当前时间：
    </div>
</body>
</html>

新建一个ShowTime.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    out.write(new java.util.Date().toLocaleString());
 %>

Post方式

xhr.open("POST","ShowTime.jsp",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//添加请求头
xhr.send("name=eaglezsx&age=22");

XMLHttpRequest对象

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

创建对象

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

XMLHttpRequest就是个变量，如果浏览器中定义了，为Object，会转换为true。如果没有定义，会转换为undefined，而undefined会转换为false。

向服务器发送请求

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

open(method,url,async):规定请求的类型、URL以及是否异步处理请求。method：请求的类型；GET或POST。url：文件在服务器上的位置。async：true(异步)或false（同步）。

send(string)：将请求发送到服务器。string：仅用于POST请求。

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

setRequestHeader(header,value):向请求添加HTTP头。

服务器响应

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

responseText:获得字符串形式的响应数据

responseXML:获得XML形式的响应数据

onreadystatechange事件

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

onreadystatechange：存储函数，每当readyState属性改变时，就会调用该函数。

readyState：存有XMLHttpRequest的状态。从0到4发生变化。

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

status：200：“OK”，404：“未找到页面”

在onreadystatechange事件在中，规定当服务器响应已做好被处理的准备时所执行的任务。

当readyState等于4且状态为200时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

注意： onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

注意事项

XMLHttpRequest只能向同一个域中的相同端口号、相同协议的url发起请求，不能跨域,否则会引起错误。
为了浏览器兼容,get请求时最好为send()传递null参数。
在创建了xhr对象后立刻设置onreadystatechange事件，这样就能监视到所有的状态。如果不需要监视其他状态只监视readyState==4的状态则可以在send()之前设置。
get请求会有缓存问题,解决方式有
- xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true)//每次的都不一样;
- xhr.setRequestHeader（'if-modified-since','0'）;//设置浏览器不使用缓存这种方式不知道为啥不能用了，添加了之后浏览器就会找不到JavaScript代码
POST请求时，为了像表单那样提交数据需要设置请求的Content-Type为：application/x-www-form-urlencoded。send(“键=值&键=值”)
通过ajax只能传递一些基本的数据，传递不了文件，要通过别的插件实现

jQuery方式Ajax

$(function(){
        $("#btnClick").click(function(){
            $.get("ShowTime.jsp",{"name":"eaglezsx","age":33},function(data){
                $("#dvTime").html("当前时间"+data);
            });
        });
    });

若是post请求直接把get改成post就行了

还有一种形式

$("#txtLoginId").blur(function () {
                 $.ajax({
                     type:"post",url:"song.php",data:"name=joh&lat=ddd",success:function (msg) {
                         alert(msg);
                     }
                 });
                 });

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!