AJAX技术_XMLHttpRequest

最新推荐文章于 2024-09-15 19:20:58 发布
最新推荐文章于 2024-09-15 19:20:58 发布
阅读量964 收藏 3
点赞数
分类专栏： Ajax 文章标签： xmlhttprequest ajax 服务器 string javascript callback
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/salasay/article/details/4005842
版权

AJAX技术核心:

XMLHttpRequest方法：

abort()停止当前请求

getAllResponseHeaders()返回包含HTTP请求的所有相应头信息，

其中响应头包括Content-Length,Date,URI等内容，

返回值是一个字符串，其中每个键名和键值用冒号分开，

每一组键之间用CR和LF(回车加换行符)来分割

getResonseHeader(String header)返回HTTP请求相应头中指定的键名header对应的值

open(String method,String url,Boolean asynch,String username,String password)：

建立对服务器的调用

send(content)：向服务器发出请求

setRequestHeader(String header,String value)

 

XMLHttpRequest属性：

onreadystatechange:请求状态改变时的事件触发器(readyState变化时会调用此方法).

                                      通常是一个javascript函数

readyState:请求状态(每次readyState变化都会触发onreadystatechange注册的回调函数)

                     0=未初始化

                     1=open方法成功调用以后

                     2=服务器已经应答客户端的请求

                     3=交互中，HTTP头相信已经接收，相应数据尚未接收

                     4=和服务器交互完成。数据接收完成

responseText:服务器返回的文本内容

responsXML:服务器返回的兼容DOM的XML内容

status服务器返回的状态码。200成功，404未找到

statusText返回状态码的文本信息

 

1.使用XHTML和CSS的基于标准的表示技术

2.使用DOM进行动态现实和交互

3.使用XML和XSLT进行后台服务器的数据交换和处理

4.使用XMLHttpRequest异步数据检索

5.使用Javascript将以上的技术融合在一起

 

 

1.       在DOM眼中，HTML是有很多不同类型的节点组成的，这些节点属于NODE对象

2.       NODE对象有一个nodeType的属性可以判断节点类型

3.       节点：元素节点、属性节点、文本节点

 

DocumentElement：表示问低昂的根元素节点

在HTML文档中，他表示<html>代表的元素节点

方法：createAttribute()：指定名字创建新的Attr节点对象，

           方法参数为属性的名字。

           CreateComment()：指定的字符串创建新的Commet节点对象，

           方法参数是注释信息。

           createElement()：指定的标签名创建新的Commet节点对象，

           方法参数为节点的名字。

 

使用jquery：

Function verify(){

         $.get(“AJAXServer?name=” + $(“#username”).val(), null, function(data){

                   $(“#result”).html(data);

});

}

 

使用XHR对象发送和接受数据

Web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/javaee"

           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

           xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

                     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

           version="2.5">

   

    <servlet>

        <servlet-name>ClassicServer</servlet-name>

        <servlet-class>ClassicServer</servlet-class>

    </servlet>

    <servlet>

        <servlet-name>AJAXServer</servlet-name>

        <servlet-class>AJAXServer</servlet-class>

    </servlet>

    <servlet>

        <servlet-name>AJAXXMLServer</servlet-name>

        <servlet-class>AJAXXMLServer</servlet-class>

    </servlet>

 

    <servlet-mapping>

        <servlet-name>ClassicServer</servlet-name>

        <url-pattern>/ClassicServer</url-pattern>

    </servlet-mapping>

    <servlet-mapping>

        <servlet-name>AJAXServer</servlet-name>

        <url-pattern>/AJAXServer</url-pattern>

    </servlet-mapping>

    <servlet-mapping>

        <servlet-name>AJAXXMLServer</servlet-name>

        <url-pattern>/AJAXXMLServer</url-pattern>

    </servlet-mapping>

   

</web-app>

 

 

Verifyown.js

//用户名校验的方法

//这个方法使用XMLHTTPRequest对象进行AJAX的异步数据交互

var xmlhttp;

function verify(){

    //0.获取文本框的值

    //document是在javascript内置对象，对应于当前页面的根节点

    //一个元素节点对应html页面中的一个标签

    var userName = document.getElementById("userName").value;

 

    //1.创建XMLHttpRequest对象

    //需要通过IE和其他类型的浏览器建立这个对象的不同方式写不同的代码

    if(window.XMLHttpRequest){

         //针对FireFox, Mozillar, Opera, Safari, IE7, IE8

         xmlhttp = new XMLHttpRequest();

 

        //针对某些特定版本的mozillar浏览器的BUG进行修正

        if(xmlhttp.overrideMimeType){

            xmlhttp.overrideMimeType("text/xml");

        }

    }else if(window.ActiveXObject){

        //针对IE6, IE5, IE5.5

        //两个可以用于创建XMLHttpRequest对象的控件名称，保存在js的数组中

        //排在前面的版本较新

        var activexName = ["MSXMLL2.XMLHTTP","Microsoft.XMLHTTP"];

        for(var i = 0; i < activexName.length; i++){

            try {

                //取出一个控件名进行创建，如果创建成功就终止循环

                //如果创建失败，会抛出异常，捕捉异常后，可以继续循环，继续尝试创建

                xmlhttp = new ActiveXObject(activexName[i]);

                break;

            } catch(e) {

            }

        }

    }

    //确认XMLHttpRequest对象创建成功

    if(!xmlhttp){

        alert("XMLHttpRequest对象创建失败");

        return;

    }else{

           alert(xmlhttp.readyState);

    }

 

    //2.注册回调函数

    //注册回调函数时，只需要函数名，不要加括号

    //我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上

    xmlhttp.onreadystatechange = callback;

 

    //3.设置连接信息

    //第一个参数表示请求方式，支持所有http的请求方式，

    //第二个参数表示请求的url地址，get方式请求的参数也在url中

    //第三个参数表示采用异步还是同步方式交互，true表示异步

    //xmlhttp.open("GET","AJAXServer?name=" + userName, true);

 

    //POST方式请求的代码

    xmlhttp.open("POST","AJAXServer",true);

    //POST方式需要自己设置http的请求头,

    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    //POST方式发送数据

    xmlhttp.send("name=" + userName);

 

    //4.发送数据，开始和服务器进行交互

    //xmlhttp.send(null);

}

 

//回调函数

function callback(){

    alert(xmlhttp.readyState);

    //5.接受响应信息

    //检查XMLHttpRequest是否交互完成 ，判断服务器的响应是否成功，才能进行数据交互

    if(xmlhttp.readyState == 4){

        //判断 http的交互是否成功

        if(xmlhttp.status == 200){

            //获取服务器端返回的数据

            //获取服务器端输出的纯文本的数据

            var responseText = xmlhttp.responseText;

            //将数据显示在页面上

            //通过dom的方式找到div标签所对应的元素节点

            var divNode = document.getElementById("result");

            //设置元素节点中的html内容

            divNode.innerHTML = responseText;

        }else{

            alert("出错了");

        }

   }

}

 

Ajax.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title>ajax用户验证示例一</title>

    <script type="text/javascript" src="jslib/verifyown.js"></script>

</head>

<body>

    请输入用户名：<br/>

    <!--ajax方式下不需要使用表单来进行数据提交-->

    <!--ajax方式不需要name属性，需要id的属性-->

    <input type="text" id="userName"/>

    <INPUT type="button" value="校验" οnclick="verify()"/>

    <!-- 预留一个空间用户服务器端的信息返回之后填充里面-->

    <!-- 这个div用于存放服务器返回来的信息,id属性定义是为了利用dom的方式找到某个节点-->

    <div id="result"></div>

</body>

</html>

 

AJAXServer.java

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpServlet;

import javax.servlet.ServletException;

import java.io.IOException;

import java.io.PrintWriter;

import java.net.URLDecoder;

 

public class AJAXServer extends HttpServlet{

 

    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {

        try {

//            httpServletRequest.setCharacterEncoding("gb18030");

//            URLDecoder.decode("234", "gb18030");

 

            httpServletResponse.setContentType("text/html;charset=utf-8");

            PrintWriter out = httpServletResponse.getWriter();

            //1.取参数

            String old = httpServletRequest.getParameter("name");

            //2.检查参数是否有问题

            if (old == null || old.length() == 0) {                                                                                      

                out.println("用户名不可以为空");

            } else {

                //3.校验操作

                String name =old;                                                       

                if (name.equals("songxiaopeng")) {

                    //4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面端而不是将一个新的页面返回给用户

                    //写法没变，本质发生了变化

                    out.println("用户名【" + name + "】已经存在，请使用其他用户名");

                } else {

                    out.println("用户名【" + name + "】尚未存在，请使用其他用户名");

                }

                out.println("<br/><a href=/"ajax.html/">返回校验页面</a>");

            }

        } catch (Exception e) {

            e.printStackTrace();

        }

    }

 

    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {

        doGet(httpServletRequest, httpServletResponse);

    }

}

 

利用XHR接受与处理XML数据:

Verifyxml.js

//用户名校验的方法

//这个方法使用XMLHTTPRequest对象进行AJAX的异步数据交互

var xmlhttp;

function verify(){

    //0.获取文本框的值

    //document是在javascript内置对象，对应于当前页面的根节点

    //一个元素节点对应html页面中的一个标签

    var userName = document.getElementById("userName").value;

 

    //1.创建XMLHttpRequest对象

    //需要通过IE和其他类型的浏览器建立这个对象的不同方式写不同的代码

    if(window.XMLHttpRequest){

         //针对FireFox, Mozillar, Opera, Safari, IE7, IE8

         xmlhttp = new XMLHttpRequest();

 

        //针对某些特定版本的mozillar浏览器的BUG进行修正

        if(xmlhttp.overrideMimeType){

            xmlhttp.overrideMimeType("text/xml");

        }

    }else if(window.ActiveXObject){

        //针对IE6, IE5, IE5.5

        //两个可以用于创建XMLHttpRequest对象的控件名称，保存在js的数组中

        //排在前面的版本较新

        var activexName = ["MSXMLL2.XMLHTTP","Microsoft.XMLHTTP"];

        for(var i = 0; i < activexName.length; i++){

            try {

                //取出一个控件名进行创建，如果创建成功就终止循环

                //如果创建失败，会抛出异常，捕捉异常后，可以继续循环，继续尝试创建

                xmlhttp = new ActiveXObject(activexName[i]);

                break;

            } catch(e) {

            }

        }

    }

    //确认XMLHttpRequest对象创建成功

    if(!xmlhttp){

        alert("XMLHttpRequest对象创建失败");

        return;

    }else{

           alert(xmlhttp.readyState);

    }

 

    //2.注册回调函数

    //注册回调函数时，只需要函数名，不要加括号

    //我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上

    xmlhttp.onreadystatechange = callback;

 

    //3.设置连接信息

    //第一个参数表示请求方式，支持所有http的请求方式，

    //第二个参数表示请求的url地址，get方式请求的参数也在url中

    //第三个参数表示采用异步还是同步方式交互，true表示异步

    //xmlhttp.open("GET","AJAXServer?name=" + userName, true);

 

    //POST方式请求的代码

    xmlhttp.open("POST","AJAXXMLServer",true);

    //POST方式需要自己设置http的请求头,

    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    //POST方式发送数据

    xmlhttp.send("name=" + userName);

 

    //4.发送数据，开始和服务器进行交互

    //xmlhttp.send(null);

}

 

//回调函数

function callback(){

    alert(xmlhttp.readyState);

    //5.接受响应信息

    //检查XMLHttpRequest是否交互完成 ，判断服务器的响应是否成功，才能进行数据交互

   if(xmlhttp.readyState == 4){

        //判断 http的交互是否成功

        if(xmlhttp.status == 200){

            //使用responseXML的方式来接收XML数据对象的DOM对象

            var domObj = xmlhttp.responseXML;

            if(domObj){

                //得到dom对象后，利用dom的API，取出有用数据

                //dom的API对操作HTML跟XML是通用过的

                //dom中利用getElementsByTagName可以根据标签名来获取元素节点,返回的是一个数组

                var messageNodes = domObj.getElementsByTagName("message");

                if(messageNodes.length>0){

                    //获取message节点中的文本内容

                    //获取当前节点的子节点

                    var textNode = messageNodes[0].firstChild;

                    var responseMessage = textNode.nodeValue;

 

                    var divNode = document.getElementById("result");

                    //设置元素节点中的html内容

                    divNode.innerHTML = responseMessage;

                }else{

                   alert("XML数据格式错误，原始文本内容为：" + domObj);

                }

            }else{

                 alert("XML数据格式错误，原始文本内容为：" + domObj);

            }

        }else{

            alert("出错了");

        }

   }

}

 

 

AJAXXMLServer.java

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.ServletException;

import java.io.IOException;

import java.io.PrintWriter;

 

public class AJAXXMLServer extends HttpServlet{

    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {

        try {

            //修改点1----相应的Content-Type必须是text/xml

            httpServletResponse.setContentType("text/xml;charset=utf-8");

            PrintWriter out = httpServletResponse.getWriter();

            //1.取参数

            String old = httpServletRequest.getParameter("name");

 

            //修改点2----返回的数据需要拼装成xml格式

            StringBuilder bulilder = new StringBuilder();

            bulilder.append("<message>");

 

            //2.检查参数是否有问题

            if (old == null || old.length() == 0) {

               bulilder.append("用户名不可以为空").append("</message>");

            } else {

                //3.校验操作

                String name =old;

                if (name.equals("songxiaopeng")) {

                    //4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面端而不是将一个新的页面返回给用户

                    //写法没变，本质发生了变化

                    bulilder.append("用户名【" + name + "】已经存在，请使用其他用户名").append("</message>");

                } else {

                    bulilder.append("用户名【" + name + "】尚未存在，请使用其他用户名").append("</message>");

                }

                out.println(bulilder.toString());

            }

        } catch (Exception e) {

            e.printStackTrace();

        }

    }

 

 

    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {

        doGet(httpServletRequest, httpServletResponse);

    }

}

salasay
关注
专栏目录
信息回显简介、Ajax实现信息回显、XMLHttpRequest的几种状态码介绍、Ajax响应数据的格式
赵大土的博客
09-16 894
1. 信息回显的两种方式1.1 同步交互1.2 异步交互2. Ajax实现异步交互2.1 一般步骤2.2 案例2.2.1 验证用户名2.2.2 实现二级联动 1. 信息回显的两种方式 1.1 同步交互 1.2 异步交互 2. Ajax实现异步交互 2.1 一般步骤 创建XMLHTTPRequest的对象 var xhr=new XMLHTTPRequest(); 建立连接 xhr.op...
【油猴脚本 Greasemonkey】GM_xmlhttpRequest内部实现原理
无知人生，记录点滴
11-01 4222
好久没在CSDN发文章了，自从有了自己的网站，自己的想怎么折腾就怎么折腾，逐步的完善。另一方面，技术上一直在吃老本，没什么进步，也没什么可发的。最近在写一个Chrome浏览器扩展，了解到一个扩展和其它网站（准确的说是API）交互的功能，也就是跨域访问。基于 Manifest V2 的content js中能不能使用 xmlhttpRequest 我没有尝试，至少在 Manifest V3 中是没办法跨域的，而在 background js 中 xmlhttpRequest 是不能使用的。
XMLHttpRequest实现终止请求和超时
热门推荐
下一站，幸福
04-15 1万+
这里是使用的XMLHttpRequest2中的API，口蹄疫通过XMLHttpRequest对象的 abort( )方法 来取消正在进行的HTTP请求，abort( )方法是在XMLHttpRequest和XMLHttpRequest2中都可用的，调用abort( )方法在这个对象上触发abort事件。调用abort( )的主要原因是完成像取消或超时请求消耗的是啊进太长或当响应变得无关时的情况 例
使用XMLHttpRequest 实现http 终止请求和超时
新的启程的博客
03-17 1万+
可以通过调用XMLHttpRequest对象的abort方法来取消正在进行的http请求 abort方法在所有的XMLHttpRequest版本和XHR2中可用，调用abort方法在这个对象上触发abort事件//终止请求和超时 function timeedGetText(url,timeout,callback){ var xhr = new XMLHttpRequest();
使用XMLHttpRequest详解
hycic的专栏
06-03 397
使用 XMLHttpRequest 仅仅3个步骤而已: 1，Creating an XMLHttpRequest object 2，Specifying and submitting your HTTP request to a web server //指定http并向一个web server提交 3，Synchronously or asynchronously retrievin...
AJAX-XMLHttpRequest 详解
来自计科萌新的编程记录本
07-26 1441
学习目标：了解axios中的XMLHttpRequest
ajax使用xmlhttprequest,使用Ajax技术通过XMLHttpRequest对象完成首页登录功能
weixin_32451529的博客
08-05 218
//创建XMLHttpRequest对象function createXMLHttpRequest(){if(window.XMLHttpRequest){return xmlhttprequest=new XMLHttpRequest();}else{return xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");}}//登录按钮执行的方...
XMLHttpRequest和Ajax
借物小人的博客
04-01 6160
XMLHttpRequest和Ajax的关系 ajax是一种技术方案，但并不是一种新技术。 ajax最核心的依赖是浏览器提供的XMLHttpRequest对象。 所以我用一句话来总结两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求 XMLHttpRequest的发展历程 XMLHttpRequest一开始只是微软浏览器提供的一个接口，后来各大浏览器纷纷效仿也提供了这个接口...
XMLHttpRequest 和 ajax
三木的博客
04-10 1463
XMLHttpRequest 和 ajax
AJAX_XMLHttpRequest.rar_ajax java_ajax xmlhttpreque_opera
09-24
AJAX入门之XMLHttpRequest慨述 　在使用XMLHttpRequest对象发送请求和处理响应之前，必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W3C标准，所以可以采用多种方法使用JavaScript来...
CRUD_AJAX_con_XMLHttpRequest _-_ json-server：CRUD配置XMLHttpRequest配置，使用json服务器
02-23
在本项目"CRUD_AJAX_con_XMLHttpRequest_-_json-server"中，我们将探讨如何使用JavaScript中的XMLHttpRequest对象来实现CRUD操作，并结合json-server创建一个模拟RESTful API服务。 XMLHttpRequest是JavaScript内置...
CAjax.rar_Ajax 留言_ajax_ajax .net_ajax C#_net
09-23
在.NET框架下，开发人员可以利用Ajax技术来构建更高效、更动态的Web应用程序。标题中的“CAjax.rar_Ajax 留言_ajax_ajax .net_ajax C#_net”表明这是一个关于使用C#和.NET框架实现Ajax无刷新留言功能的源码示例。这...
使用Ajax技术通过XMLHttpRequest对象完成首页登录功能
10-25
Ajax技术的核心是XMLHttpRequest对象，此对象提供了在后台与服务器交换数据的功能。 2. XMLHttpRequest对象：XMLHttpRequest对象用于在后台与服务器交换数据，从而实现网页的动态更新。创建XMLHttpRequest对象时，...
AJAX 入门 day1
2301_77358195的博客
09-15 486
1.AJAX 概念和 axios 使用“Ajax” 是 “Asynchronous(异步) JavaScript and XML” 的缩写，是一种用于创建动态网页的技术。它允许网页在不重新加载整个页面的情况下与服务器进行交互和更新内容，从而提高用户体验和页面的响应速度。怎么用 AJAX？1.先使用axios[æk‘sioʊs]库，与服务器进行数据通信基于 XMLHttpRequest 封装、代码简单、月下载量在 14 亿次Vue、React 项目中都会用到 axios2.
Ajax 使用流程详解
最新发布
qq_69304031的博客
09-15 431
在现代 Web 开发中，Ajax（Asynchronous JavaScript and XML）技术被广泛应用于实现页面的局部刷新和异步数据交互，提升用户体验。本文将结合具体的代码示例，详细介绍 Ajax 的使用流程，并拓展一些相关知识点。
裸金属服务器与云服务器的区别有哪些？
wanhengwangluo的博客
09-11 475
云服务器通常是基于虚拟化技术，云服务器环境中的资源一般会受到其他虚拟机的影响，从而导致一定的波动，但是云服务器与裸金属服务器相比较来说，可以为企业提供更多的灵活性与可扩展性，同时整体的经济成本会较低一点，会更加适用于一些中小型企业和个人用户来进行使用。裸金属服务器相对于云服务器来说有着卓越的性能，因为没有虚拟化层的开销，可以直接访问底层硬件资源，以此来实现更高的计算性能、内存和存储容量，所以裸金属服务器一般会运用在需要处理大规模数据处理和高性能计算等任务当中。
高防服务器的优势与劣势分析
2403_86998484的博客
09-10 455
高防服务器通过持续监控和快速响应网络安全事件，极大地减少了由于网络攻击导致的服务中断，从而确保了业务的连续性。在网络安全威胁日益增加的今天，保障数据的安全是企业信誉的重要部分。高防服务器通常需要更多的资源来维护其高级的安全功能，包括硬件和软件的配置。这使得高防服务器的成本远高于标准服务器，可能需要更多的初期和持续的投资。高防服务器要求专业的知识和技能来进行正确的配置和维护。为了实现强大的安全防护，某些安全措施可能会对服务器的性能产生影响，例如，高强度的流量过滤可能会导致处理速度变慢，影响用户体验。
网站优化与服务器：性能提升的双重奏
2403_86998484的博客
09-14 396
通过优化服务器配置、提升硬件性能、加强安全防护和实施有效的监控与维护，可以显著提升网站的性能和用户体验。网站优化是一个持续的过程，需要服务器和前端技术的协同配合，共同打造快速、稳定、安全的网站。在互联网高速发展的今天，网站的响应速度和用户体验直接影响着用户的留存率和转化率。而服务器作为网站运行的基石，其性能和配置对网站优化起着至关重要的作用。图片和媒体优化：压缩图片和视频，使用合适的格式和分辨率，加快加载速度。服务器的响应速度、稳定性和处理能力直接影响网站的加载时间和运行效率。
Ajax核心技术：XMLHttpRequest对象详解
Ajax技术的关键在于，通过创建XMLHttpRequest对象，开发者可以与服务器进行后台通信，处理数据并更新页面的特定部分。在不同的浏览器环境中，创建XMLHttpRequest对象的方法有所不同，如在IE5.0/6.0中使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值