Ajax访问服务器的几种方式

最新推荐文章于 2024-04-19 18:29:26 发布
最新推荐文章于 2024-04-19 18:29:26 发布
阅读量1.8k 收藏
点赞数
分类专栏： 技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34734520/article/details/52181939
版权

今天，学习到了三种通过Ajax访问后台数据库的方式，前台是JavaScript+html，后台是一个handler（一般处理程序），对于原理上面的东西不做太多描述，在输入用户名后，进行用户名校正，本实例采用的是异步请求方式，就是将open的第三个参数设置为true，如果要采用同步的请求方式，改成false即可，就不需要onreadystatechange方法来进行监听

一、处理字符串或者html（GET）

前台：

<!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">  
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
var MSXML = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
for (var n = 0; n < MSXML.length; n++) {
try {
xmlhttp = new ActiveXObject(MSXML[n]);
break;
} catch (e) { }
}
}
return xmlhttp;
}

    //使用Ajax的步骤，GET请求
function checkUserByAjaxByGet() {
var name = document.getElementById("name").value;

//第一步，得到一个XMLHttpRequest对象
//var xhr = new XMLHttpRequest();
//如果是IE，就需要使用ActiveX组件
//var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

var xhr = createXMLHttpRequest();
//第二步，建立一个连接请求，false表示同步执行，只有当服务器执行完成后才继续执行;true表示异步，无需等待服务器执行结果继续执行;常用方式为true（异步）
xhr.open("GET", "checkUserPostOrGetHandler.ashx?name=" + name, true);

//设置一个针对reandyonchange的事件的监听函数
xhr.onreadystatechange = function() {
//document.getElementById("statusMsg").innerHTML += "readyState:" + xhr.readyState + ",status" + xhr.status + "<br/>";
//readyState：0、代表未初始化，还没有调用open方法；1、代表正在加载。open方法已被调用，但send方法还没有被调用；2、代表已经加载完毕，send已被调用，请求已经开始；3、代表交互中，服务器正在发送响应；4、代表完成，响应发送完毕
//status：404、没找到页面(not found)；403、禁止访问(forbidden)；500、内部服务器出错(internal service error)；200、一起正常(ok)；304、没有被修改(not modified)（服务器返回304状态，表示源文件没有被修改
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 304) {
document.getElementById("msg").innerHTML = xhr.responseText;
}
}
}
//第三步，发起请求
xhr.send(null); 
}
 </script>
</head>
<body>
<form id="form1" runat="server" >

<p>
用户名：
  <input type="text" id="name" runat="server" οnchange="checkUserByAjaxByGet()"/>  
</p>
<div id="msg" ></div> 
<p>
密码：
<input type="password" id="pwd" />
</p>
</form>
<div id="statusMsg"></div>
</body>
</html>
后台：
 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace ExtjsApplication.Demo3
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class checkUserPostOrGetHandler : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{ 
context.Response.ContentType = "text/plain";
string name = context.Request.Params["name"];
string msg = "恭喜您，该用户可用";
if ("admin".Equals(name)) { 
//实际应该调用后台数据库或者业务逻辑
msg = "对不起，用户已经存在";
}
context.Response.Write(msg);
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

 

 

二、处理字符串或者html（POST）

前台：

<!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">  
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
var MSXML = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
for (var n = 0; n < MSXML.length; n++) {
try {
xmlhttp = new ActiveXObject(MSXML[n]);
break;
} catch (e) { }
}
}
return xmlhttp;
}

 //使用Ajax的步骤，POST请求方式
function checkUserByAjaxByPost() {
var name = document.getElementById("name").value; 

//第一步，创建XHR对象
var xhr = createXMLHttpRequest();
//第二步，建立一个连接请求，false表示同步执行，只有当服务器执行完成后才继续执行;true表示异步，无需等待服务器执行结果继续执行;常用方式为true（异步）
xhr.open("POST", "checkUserPostOrGetHandler.ashx", true);

//第三步，设置一个针对reandyonchange的事件的监听函数，负责处理返回结果
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 304) {
var ret = xhr.responseText;
document.getElementById("msg").innerHTML = xhr.responseText;
if (ret == "对不起，用户已经存在") {
document.getElementById("name").focus();
}
}
}
}
//设置请求头，如果是post请求方式，必须设置，表示以表单形式发送文件，相当于form表单里面的enctype="application/x-www-form-urlencoded"
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//第四步，发起请求
xhr.send("name="+name+"&password=pppp");
}
 </script>
</head>
<body>
<form id="form1" runat="server" >

<p>
用户名：
  <input type="text" id="name" runat="server" οnchange="checkUserByAjaxByPost()"/>  
</p>
<div id="msg" ></div> 
<p>
密码：
<input type="password" id="pwd" />
</p>
</form>
<div id="statusMsg"></div>
</body>
</html>
后台：
 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace ExtjsApplication.Demo3
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class checkUserPostOrGetHandler : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{ 
context.Response.ContentType = "text/plain";
string name = context.Request.Params["name"];
string msg = "恭喜您，该用户可用";
if ("admin".Equals(name)) { 
//实际应该调用后台数据库或者业务逻辑
msg = "对不起，用户已经存在";
}
context.Response.Write(msg);
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

 

 

 

三、处理XML

前台：

<!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">  
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
var MSXML = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
for (var n = 0; n < MSXML.length; n++) {
try {
xmlhttp = new ActiveXObject(MSXML[n]);
break;
} catch (e) { }
}
}
return xmlhttp;
}

//使用Ajax的步骤，XML访问服务器
function checkUserByAjaxByXML() {
var name = document.getElementById("name").value;

//第一步，创建XHR对象
var xhr = createXMLHttpRequest();
//第二步，建立一个连接请求，false表示同步执行，只有当服务器执行完成后才继续执行;true表示异步，无需等待服务器执行结果继续执行;常用方式为true（异步）
xhr.open("POST", "checkUserXMLHandler.ashx", true);

//第三步，设置一个针对reandyonchange的事件的监听函数，负责处理返回结果
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 304) {
var ret = xhr.responseXML;
var root = ret.documentElement;
var codeNode = root.getElementsByTagName("code")[0];
var MsgNode = root.getElementsByTagName("msg")[0];
//alert(root.getElementsByTagName("code")[0].nodeName);
//alert(root.firstChild.firstChild.nodeValue);
//alert(root.childNodes[0].childNodes[0].nodeValue);
//alert(ret.documentElement.nodeName); 
// alert(ret);
// document.getElementById("msg").innerHTML = xhr.responseXML;
// if (ret == "对不起，用户已经存在") {
// document.getElementById("name").focus();
// } 
document.getElementById("msg").innerHTML = MsgNode.firstChild.nodeValue;
if (codeNode.firstChild.nodeValue == "1") {
document.getElementById("name").focus();
}
}
}
}
//设置请求头，如果是post请求方式，必须设置，表示以表单形式发送文件，相当于form表单里面的enctype="application/x-www-form-urlencoded"
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//第四步，发起请求
xhr.send("name=" + name + "&password=pppp");
}
 </script>
</head>
<body>
<form id="form1" runat="server" >

<p>
用户名：
  <input type="text" id="name" runat="server" οnchange="checkUserByAjaxByXML()"/>  
</p>
<div id="msg" ></div> 
<p>
密码：
<input type="password" id="pwd" />
</p>
</form>
<div id="statusMsg"></div>
</body>
</html>
后台：
 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace ExtjsApplication.Demo3
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class checkUserPostOrGetHandler : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{ 
context.Response.ContentType = "text/xml";
string name = context.Request.Params["name"];
string msg = "恭喜您，该用户可用";
int code = 0;
if ("admin".Equals(name))
{
//实际应该调用后台数据库或者业务逻辑
msg = "对不起，用户已经存在";
code = 1;
}
//context.Response.Write(msg);
context.Response.Write("<result><code>"+code+"</code><msg>"+msg+"</msg></result>");
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

 

 

 

四、处理JSON

前台：

<!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">  
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
var MSXML = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
for (var n = 0; n < MSXML.length; n++) {
try {
xmlhttp = new ActiveXObject(MSXML[n]);
break;
} catch (e) { }
}
}
return xmlhttp;
}


//使用Ajax的步骤，JSON访问服务器
function checkUserByAjaxByJson() {
var name = document.getElementById("name").value;

//第一步，创建XHR对象
var xhr = createXMLHttpRequest();
//第二步，建立一个连接请求，false表示同步执行，只有当服务器执行完成后才继续执行;true表示异步，无需等待服务器执行结果继续执行;常用方式为true（异步）
xhr.open("POST", "checkUserJsonHandler.ashx", true);

//第三步，设置一个针对reandyonchange的事件的监听函数，负责处理返回结果
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 304) {
var ret = eval("(" + xhr.responseText + ")");
//alert(ret);
document.getElementById("msg").innerHTML = ret.msg; 
if (ret.code == "1") {
document.getElementById("name").focus();
}
}
}
}
//设置请求头，如果是post请求方式，必须设置，表示以表单形式发送文件，相当于form表单里面的enctype="application/x-www-form-urlencoded"
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//第四步，发起请求
xhr.send("name=" + name + "&password=pppp");
}

 </script>
</head>
<body>
<form id="form1" runat="server" >

<p>
用户名：
<input type="text" id="name" runat="server" οnchange="checkUserByAjaxByJson()"/>  
</p>
<div id="msg" ></div> 
<p>
密码：
<input type="password" id="pwd" />
</p>
</form>
<div id="statusMsg"></div>
</body>
</html>
后台：
 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace ExtjsApplication.Demo3
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class checkUserPostOrGetHandler : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{ 
context.Response.ContentType = "text/json"; 
string name = context.Request.Params["name"];
string msg = "恭喜您，该用户可用";
int code = 0;
if ("admin".Equals(name))
{
//实际应该调用后台数据库或者业务逻辑
msg = "对不起，用户已经存在";
code = 1;
}
//context.Response.Write(msg);
//context.Response.Write("{code:'"+code+"',msg:'"+msg+"',obj:{name:'obj'}}");
context.Response.Write("{code:'" + code + "',msg:'" + msg + "'}");
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

qq_34734520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX跨域实现的三种方式
06-25
解决AJAX跨域问题有多种策略，主要分为以下几种： 1. **JSONP(JSON with Padding)**： - JSONP是一种规避同源策略的技术，它利用`<script>`标签不受同源策略限制的特点。通过在请求URL中添加一个`callback`参数，...
浅谈与AJAX相关的几种技术.pdf
01-02
"浅谈与AJAX相关的几种技术" 本文将对与AJAX相关的几种技术进行简单介绍，包括XHTML、CSS、XML、XSLT和DOM等。 首先，AJAX技术丰富的功能、交互性以及快速的响应能力受到人们广泛青睐，但实际上AJAX是多种老技术的...
AJAX访问数据库
AnnGreen的博客
12-19 5998
AJAX访问数据库 AJAX（Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）可以在不重新加载整个页面的情况下与服务器交换数据并更新网页内容。之前学的时候没怎看，现在刚好能用到，又是一个黑暗中瞎摸索的过程 ???? XMLHttpRequest对象 XMLHttpRequest 对象是AJAX的基础，通过它就可以在后台与服务器交换数据，能够让我们在不重新加载整个网页的情况下，对网页局部进行更新，且目前几乎所有的浏览器都支持（除了IE5 和 IE6，它
ajax通过客户端的服务器去访问别的服务器避免同源政策
grand_brol的博客
08-22 198
原理 ajax的同源政策主要是浏览器比让你执行跨域请求，而如果我们通过自己的服务器去访问则没有限制，然后我们自己客户端防卫自己的服务器即可。 A客户端->A服务器->B服务器 A客户端代码 <button onclick="btn" id='button'>发送请求</button> <script> var btn = document.getElementById('button') btn.onclick = f
使用AJAX访问后台数据的完整步骤，此代码为测试，仅供刚开始学习AJAX的同学使用，不与项目兼容
最新发布
D1561691的博客
04-19 611
/1、创建xhr（XMLHttpRequest）//请求状态码：请求没有发出，在调用open之前//0//2、和服务器进行连接//使用open这个方法进行连接，连接的时候传入参数，参数为从文本框中获取的zh//get请求zh=” + zh);//请求状态码：请求已经建立，但是没有发出 在调用send之前//1//post请求的应用//3、执行回调函数//不能带有参数。否则会无法调用//4、get发送数据//post请求发送数据//完成回调函数。
访问服务器的4种方式、Ajax、前后端交互3个流程、Ajax的工作原理、get请求与post请求
weixin_65100963的博客
04-17 1858
前端访问服务器的几种方式 1.直接在浏览器地址栏输入网址url (网页会跳转,全局刷新) www.baidu.com 2.HTML的a标签的href属性 (网页会跳转,全局刷新) <a href="https://autumnfish.cn/api/joke">点我跳转</a> 3.location.href=‘’ (网页会跳转,全局刷新) location.href=‘’ location.assign(‘’) document.querySelector('.btn').onc
ajax总结(三):ajax跨域访问接口方法汇总
庚中
11-13 6877
ajax跨域访问接口方法汇总 一.学习跨域之前先要了解: 1.同源和跨域的概念 a.同源:协议头、域名、端口全部一样就叫同源; b.跨域:只要协议头,域名,端口任意一个不一样就是跨域. 因为跨域的影响,导致浏览器出于安全角度考虑，不允许你用ajax（XMLHttpRequest）访问跨域的资源. 来一张图来说明: (如果使用了跨域,会报&amp;amp;amp;quot;No ‘Access-Control-Allow-Origi...
Ajax跨域访问
小鼠标的博客
08-06 444
最近，学了springMVC，SpringBoot（两个都可以做web服务，收发http请求），心血来潮，想用Ajax访问这个服务不仅要在项目中使用ajax，，还要开两个服务器，，用ajax去访问，实现，任何地点的访问（哈哈说的有点大）但是ajax 访问其他服务器会出现跨域问题，在这里直接给出，博主的解决方案：错误代码：XMLHttpRequest cannot load http://localh
详解Django解决ajax跨域访问问题
09-20
要解决Django中的AJAX跨域问题，我们可以采取以下几种方法： 1. 使用django-cors-headers中间件 `django-cors-headers` 是一个流行的Django第三方库，专门用来处理CORS问题。首先，你需要通过pip安装这个库： ```...
js清除浏览器缓存的几种方法
12-08
本文将介绍几种在JavaScript中清除浏览器缓存的方法。 首先，我们可以通过HTML的`<meta>`标签来控制浏览器的缓存行为。在页面头部加入以下代码可以指示浏览器不缓存页面： ```html , must-revalidate"> ``` ...
浅谈多个有序ajax访问示例
08-21
本篇文章将深入探讨如何实现多个有序的Ajax访问，并通过实例进行讲解。 首先，我们需要理解Ajax的基本结构。一个基本的Ajax请求通常包括以下几个步骤： 1. 创建XMLHttpRequest对象：这是Ajax的核心，它是浏览器...
Ajax及跨域请求
YUELEI118的博客
07-05 2083
javaScript实现ajax jquery实现ajax ajax跨域请求 jsonp
ajax 访问
小X的书屋
10-19 346
使用jquery ajax 访问是一种常见的方法 $.ajax({ type: &quot;POST&quot;, async: true, url: eastcom.baseURL + '/rest/commonList', data: postData, dataType: &quot;json&quot;, ...
$.ajax()方法从服务器获取json数据几种方式详解
热门推荐
Sun9528的博客
06-10 7万+
对$.ajax()方法从服务器获取json数据的几种方式进行详解
如何使用Ajax进行与服务器交互
zhx__的博客
08-08 5140
@如何使用Ajax 如何使用Ajax进行与服务器交互 AJAX全称为“Asynchronous [ei’siŋkrənəs] JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 注意:Ajax的主要目的:1、局部刷新 2、异步通信 Ajax的技术特点:异步通信、局部刷新 Ajax执行的五个步骤 1.创建XMLHttpRequest对象 XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入，被称为
AJAX中服务器响应请求的两种方式
lishundi的博客
08-18 1863
先来说一下几种常见的状态码： （１）readyState状态码： 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪 （２）HTTP状态码： 200：服务器成功返回网页 404：请求的网页不存在 503：服务器暂时不可用 两种方式： （１）onreadystatechange方式： &lt;!DOCTYPE html&...
【NET】ajax跨域访问服务器
Mr_Wanter
12-06 294
解决方案1：webservice + jsonp  但是jsonp跨域访问只能以get方式请求，而调用webservice却只能以post方式调用。 解决方案2：WCF + soap    SOAPProxyFabric.fromUrl("http://xxxx/WCFName.svc?singleWsdl", true, gotproxycallback); functi...
后端向前端传数据的几种方式
06-08
后端向前端传递数据的几种方式包括： 1. AJAX：使用 JavaScript 发送异步请求，从后端获取数据并更新前端页面。 2. WebSocket：一种支持双向通信的协议，可以在后端和前端之间实时传输数据。 3. RESTful API：一种...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值