AJAX技术_XMLHttpRequest

最新推荐文章于 2024-09-18 23:27:31 发布
最新推荐文章于 2024-09-18 23:27:31 发布
阅读量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 895
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 4236
好久没在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 398
使用 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 1453
学习目标：了解axios中的XMLHttpRequest
ajax使用xmlhttprequest,使用Ajax技术通过XMLHttpRequest对象完成首页登录功能
weixin_32451529的博客
08-05 219
//创建XMLHttpRequest对象function createXMLHttpRequest(){if(window.XMLHttpRequest){return xmlhttprequest=new XMLHttpRequest();}else{return xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");}}//登录按钮执行的方...
XMLHttpRequest和Ajax
借物小人的博客
04-01 6164
XMLHttpRequest和Ajax的关系 ajax是一种技术方案，但并不是一种新技术。 ajax最核心的依赖是浏览器提供的XMLHttpRequest对象。 所以我用一句话来总结两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求 XMLHttpRequest的发展历程 XMLHttpRequest一开始只是微软浏览器提供的一个接口，后来各大浏览器纷纷效仿也提供了这个接口...
XMLHttpRequest 和 ajax
三木的博客
04-10 1467
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对象时，...
Dify 中的讯飞星火平台工具源码分析
最新发布
NLP工程化
09-18 1267
本文主要对 Dify 中的讯飞星火平台工具 spark 进行了源码分析，该工具可根据用户的输入生成图片，由讯飞星火提供图片生成 API。通过本文学习可自行实现将第三方 API 封装为 Dify 中工具的能力。
AJAX 入门 day3
2301_77358195的博客
09-16 1083
学习之前先了解一下ajax和axios之间的区别：是一种允许网页在后台与服务器进行数据交换的技术，而不需要重新加载整个页面。它不是一种特定的库或框架，而是一种实现异步数据传输的通用方法。，它适用于浏览器和 node.js。（在浏览器中）或 node.js 的原生 HTTP 模块，但它抽象了它们的复杂性，使得发送请求更加容易。在现代前端开发中，Axios 被广泛推荐用来发起 HTTP 请求，因为它简单易用，并且容易集成到常见的进程式任务中，如 React、Vue 或 Angular 应用。
Linux 命令
m0_74064008的博客
09-18 747
tar -cvf archive.tar /path/to/dir # 创建 tar 包。zip archive.zip file1 file2 # 创建 zip 压缩包。find /path -name "*.txt" # 查找所有 .txt 文件。tail -n 20 file.txt # 显示最后20行。head -n 20 file.txt # 显示前20行。gunzip file.txt.gz # 解压 `.gz` 文件。
集群聊天服务器项目【C++】（四）cmake介绍和简单使用
xaiobai123的博客
09-15 519
本章介绍了为什么使用cmake：比手写Makefile简单，cmake安装、vscode配置，以及用cmake编译上一章的代码。但是对于一个复杂的项目，使用cmake还需要其他额外的配置，后面会再详细介绍。
Linux5-echo,＞,tail
2301_80339607的博客
09-15 604
选项-f，例如tail -f test.txt，实时跟踪（如果添加数据，这里立即显示，如果要退出追踪，按Ctrl+c）例如：echo "hello world"，输出hello world。选项-num，例如tail -5 test.txt，查看末尾5行。echo 'pwd'，输出pwd的位置。tail用于查看末尾内容，默认为末尾10行。echo是输出命令，类似printf。例如：tail test.txt。>指把左边内容覆盖到右边。>>把左边内容追加到右边。2.重定向符> >>
Ajax核心技术：XMLHttpRequest对象详解
Ajax技术的关键在于，通过创建XMLHttpRequest对象，开发者可以与服务器进行后台通信，处理数据并更新页面的特定部分。在不同的浏览器环境中，创建XMLHttpRequest对象的方法有所不同，如在IE5.0/6.0中使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值