原生Ajax

迷南。 2022-04-05 03:56 288阅读 0赞

原生Ajax

<span>输入账号 :</span>  
<input id="name" name="name" οnkeyup="check()" type="text">   
<span id="checkResult"></span>  
    
<script>

第一步：jsp中设置全局变量  
var xmlhttp;  
function check()\{  
  var name = document.getElementById("name").value;  
  var url = "http://how2j.cn/study/checkName.jsp?name="+name;

第二步：实例化XMLHttpRequest  
  xmlhttp =new XMLHttpRequest();

第三步：设置响应函数checkResult，注意checkResult（）错误！：后面不能加括号，加括号表示函数的结果  
  xmlhttp.onreadystatechange=checkResult;

第四部：设置访问的页面  
  xmlhttp.open("GET",url,true);   //设置访问的页面

第五部：执行访问  
  xmlhttp.send(null);  //执行访问  
\}  
    
function checkResult()\{  
  第六部：编写响应函数  
  if (xmlhttp.readyState==4 && xmlhttp.status==200)  
    document.getElementById('checkResult').innerHTML=xmlhttp.responseText;  
     
\}  
</script>

xmlhttp.send(null)  
null表示没有参数，因为参数已经通过“GET" 方式，放在url里了。  
只有在用"POST"，并且需要发送参数的时候，才会使用到send。  
类似这样：  
    在提交之前需要设置请求头  
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
xmlhttp.send("user="+username+"&password="+password)

xmlhttp.readyState 4 表示请求已完成  
xmlhttp.status 200 表示响应成功  
xmlhttp.responseText; 用于获取服务端传回来的文本  
服务端传文本不要使用println(),可以使用print();

创建ajax对象有时候需要判定：  
var xmlHttp;  
if(window.ActiveXObject)\{  
    xmlHttp =   
\}else if(window.XMLHttpRequest)\{  
    xmlhttp =new XMLHttpRequest();  
\}

发表评论取消回复

表情：

评论列表（有 0 条评论，288人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript 原生Ajax

Ajax中常用的就是XMLHttpRequest 在JS中创建XMLHttpRequest var request=new XMLHttpRequest(); 设置参数

迈不过友情╰/ 2024年02月18日 21:43/ 0 赞/ 88 阅读

相关原生AJAX（捕获野生的ajax）

AJAX 不需要刷新页面也能发送请求的技术：AJAX 1、创建AJAX对象： var ajax = new XMLHttpRequest();

悠悠/ 2022年12月24日 10:59/ 0 赞/ 249 阅读

相关 ajax原生js写法

[参考][Link 1] 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

柔光的暖阳◎/ 2022年09月21日 11:43/ 0 赞/ 247 阅读

相关原生ajax封装

引入线上jquery： <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

梦里梦外;/ 2022年09月14日 02:25/ 0 赞/ 281 阅读

相关原生ajax实现

1.创建一个XMLHttpRequest对象 let xhr = new XMLHttpRequest() 2.打开请求 xhr.open(请求方式,请求地址

爱被打了一巴掌/ 2022年09月12日 08:59/ 0 赞/ 72 阅读

相关原生ajax实例

var xmlhttp = new XMLHttpRequest(); //创建事件处理程序

悠悠/ 2022年05月31日 05:51/ 0 赞/ 265 阅读

相关原生Ajax

原生Ajax <span>输入账号 :</span> <input id="name" name="name" οnkeyup="check()" type="text"

迷南。/ 2022年04月05日 03:56/ 0 赞/ 289 阅读

相关原生ajax的封装

原生ajax的封装 get请求 post请求有参无参都可以实现返回数据类型，需要自己处理，返回字符串格式 <!DOCTYPE html> <html

青旅半醒/ 2022年01月23日 06:04/ 0 赞/ 340 阅读

相关原生JS实现Ajax

> 前言 > > 这篇文章将给大家详细介绍一下，与JQuery对照用原生的js怎么去实现Ajax。 <table style="border:0px so

迷南。/ 2021年09月29日 08:02/ 0 赞/ 482 阅读

相关原生ajax封装

//参数/ url :地址 obj: 参数 callback 回调 //没做容错有时间在写一

深藏阁楼爱情的钟/ 2021年09月16日 23:42/ 0 赞/ 442 阅读