AJAX原始应用XMLHttpRequest

最新推荐文章于 2023-07-13 21:00:04 发布
最新推荐文章于 2023-07-13 21:00:04 发布
阅读量526 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanpingsoft/article/details/25628823
版权

// 此页面可以是 HTML页面，也可以是 .aspx 前台页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript">
        function AjaxGetTest() {
            var ajax = new XMLHttpRequest;
            var username = document.getElementById("txt_username").value;
            var age = document.getElementById("txt_age").value;
            ajax.open("get", "Test.aspx?username=liyanping&&age=25");
            ajax.onreadystatechange = function() {
                if (ajax.readyState == 4 && ajax.status == 200) {
                    document.getElementById("result").innerHTML = ajax.responseText;
                }

            }
            ajax.send(null);
        }

        function AjaxPostTest() {
            var postajax = new XMLHttpRequest;

            postajax.open("post", "Test.aspx", true);
            var param = "username='zhangsan'&&age='32'";
            postajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            postajax.send(param);
            postajax.onreadystatechange = function() {
                if (postajax.readyState == 4 && postajax.status == 200) {
                    document.getElementById("result").innerHTML = postajax.responseText;
                }
            }
           
        }
   </script>
</head>
<body>
 
    <input type="button" value="AjaxGetTest" id="btn" οnclick="AjaxGetTest();"  />
    <input type="button" value="AjaxPostTest" id="Button1" οnclick="AjaxPostTest();"  />
    <div id="result">
    </div>
</body>
</html>


// 后台接收页面，注意，（这个跟前台不是一个页面）


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AJAXTest
{
    public partial class Test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Response.Clear();
                //Get方式获取参数
                //string username = Request.QueryString["username"];
                //string age = Request.QueryString["age"];
               
                //Post方式获取参数
                string username = Request.Form["username"].ToString();
                string age = Request.Form["age"].ToString();
                Response.Write("姓名:'" + username + "'<br/>年龄:" + age + "<br/>时间:'" + DateTime.Now.ToString() + "'");
                Response.End();
            }

        }
    }
}

// 总结，ＰＯＳＴ方式提交，除了多了一个设置头的方法外，就是在获取参数的方式上不太一样，这是需要注意的


弹一曲温柔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原始XMLHttpRequest方法详情回顾
09-04
这个技术在现代Web开发中至关重要，特别是在构建富交互式应用程序（AJAX，Asynchronous JavaScript and XML）时。让我们深入探讨一下使用XMLHttpRequest进行登录验证的具体步骤和相关知识点。 1. **获取用户输入**...
ajax原始实现
03-11
综上所述，Ajax的原始实现主要涉及XMLHttpRequest对象的使用，包括初始化请求、发送请求、处理响应等步骤。在实际应用中，还需考虑跨域、兼容性和UI更新等问题。随着技术进步，开发者可以选择更现代的API和工具来...
AJAX —— new XMLHttpRequest
最新发布
weixin_70862058的博客
07-13 138
2.ajax对象打开接口 ajax.open(请求方式，接口地址，是否异步) 异步：多线程同时运行(true) 同步：单线程依次运行(false)1.示例出一个ajax对象。3.ajax对象发送请求。4.监听请求是否成功。
JavaScript原生ajax（XMLHttpRequest对象）用法
印第安米饭
10-18 656
传统方法的缺点: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应...
Ajax 网络请求
ximingx
03-14 558
Ajax 的概念 在浏览器中，我们可以在不刷新页面的情况下，通过 Ajax 的方式去获取一些新的内容。 Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。 Ajax 原理（发送 Ajax 请求的五个步骤） 其实也就是 使用 XMLHttpRequest 对象的五个步骤。 一个完整的 HTTP 请求需要的是： 请求的网址、请求
手写AJAX：XMLHttpRequest
growb的博客
02-18 231
Ajax XMLHttpRequest实现数据请求
原生js实现ajax请求
u010373973的博客
09-24 132
get var ajax = new XMLHTTPRequest(); ajax.open('get','url地址'); ajax.send(); ajax.onreadystatechange = function (){ if(ajax.readyState == 4 && ajax.status == 200){ console.log(ajax.responseT...
基于ajax相册系统
10-26
由于Ajax加载的内容不在原始HTML中，搜索引擎可能无法抓取这些内容。可以通过将Ajax内容预先渲染在服务器端，或者使用History API和PushState来模拟页面跳转，改善SEO。 ### 9. 错误处理 在Ajax应用中，错误处理...
XMLHttpRequest Level 2 使用指南
09-01
XMLHttpRequest Level 2 是对原始 XMLHttpRequest 接口的重大升级，旨在提供更强大的功能，以适应互联网的快速发展。这个新版本的出现，旨在解决旧版本的一些局限性，促进Web应用程序的创新。 在老版本的 ...
CRUD:原始应用程序进行测试
03-31
对于一个名为"CRUD:原始应用程序进行测试"的项目，我们可以推断它是一个使用JavaScript编程语言实现的基础CRUD操作的应用。这个应用可能是一个简单的Web应用，用于演示如何在前端或后端执行这些数据库操作。 首先，...
js ajax php实例,原生JS实现ajax与ajax的跨域请求实例
weixin_34510298的博客
03-25 88
一、原生JS实现ajax第一步获得XMLHttpRequest对象第二步：设置状态监听函数第三步：open一个连接，true是异步请求第四部：send一个请求，可以发送一个对象和字符串，不需要传递数据发送null第五步：在监听函数中，判断readyState=4&&status=200表示请求成功第六步：使用responseText、responseXML接受响应数据，并使用原生J...
ajax总结
茜茜的博客
08-15 177
1. 原生ajax的写法 ①创建XMLHttpRequest 对象 var ajax = new XMLHttpRequest(); ②规定请求的类型、URL 以及是否异步处理请求 ajax.open( 'GET',url, true); ③发送信息至服务器时内容编码类型 ajax.setRequestHeader( "Content-type", "application/x-www-form-urlencoded"); ④发送请求 ajax.sent(null); ⑤接受服务器响应数
原生Ajax详细获取数据
weixin_52703987的博客
07-22 2万+
1.原生AjaxGET获取 //步骤一:创建异步对象 var ajax = new XMLHttpRequest(); //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端 ajax.open('get','路径'); //步骤三:发送请求 ajax.send(); //步骤四:注册事件 onreadystatechange 状态改变就会调用 ajax.onreadystatechange = function () {
AJAX基础讲解
LYM0411的博客
06-08 159
AJAX
Ajax详解
m0_37671741的博客
09-25 215
一、概念 Ajax（Asynchronous JavaScript and XML），即异步JavaScript和XML。这里提到的异步其实想表达的意思是局部刷新。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法，是几种原有技术的结合体，包括：（1）使用CSS和XHTML来表示。（2）使用DOM模型来交互和动态显示。（3）使用XMLHttpRequest来和服务器进行异步通信。...
Ajax异步测试
风泊月
03-13 1557
使用Ajax完成异步请求，对其使用有一个简单的认识1.完成两个基本的小功能，效果如下2.组成非常简单Servlet+jspjsp如下&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt; &lt;% String path = request.getContextPath(); String basePa...
面试题11：AJAX中XMLHttpRequest使用的五大步骤【原生ajax发送请求的五大步骤】
qq_51066068的博客
04-20 1973
面试官：请说一下AJAX中XMLHttpRequest有哪五大步骤 答： 1.创建XMLhttpRequest对象 2.使用open方法设置和服务器的交互信息 3.如果默认是json格式,那就可以不设置requestHeader,默认的发送的是json格式数据 4.发送请求 5.如果请求完成，并响应完成，获取到响应数据 先上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset=.
js 发送ajax请求（XMLHttpRequest）
weixin_30807677的博客
08-26 578
<!DOCTYPE html><html> <head> <title></title> <script type="text/javascript"> ajax({ url: "http://localhost:8080/save", type: "POST", ...
AJAX问题之XMLHttpRequest status = 0
热门推荐
iaiti的专栏
12-27 12万+
其实这篇文章要写的不止是XMLHttpRequest status = 0 这个问题，还有我重新看AJAX遇到的一些问题和自己的反思。 先看整个例子： <html> <head> <script type="text/javascript"> var xmlhttp; function loadXMLDoc(url) { xmlhttp...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值