gpt4 book ai didi

AJAX的使用方法详解

转载 作者:qq735679552 更新时间:2022-09-28 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章AJAX的使用方法详解由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

AJAX作为异步传输,局部刷新非常方便,用处很广! 。

首先,对于AJAX的使用有4步:

1.创建AJAX对象 。

var xmlHttp = new XMLHttpRequest(),

2.建立连接 (‘提交方式',‘Url地址') 。

xmlHttp.open('get','./AJAX_XML.xml'),

3.判断ajax准备状态及状态码 。

?
1
2
3
4
5
xmlHttp.onreadystatechange = function (){
 
     if (xmlHttp.readyState==4 && xmlHttp.status==200) {
   }
}

4.发送请求 。

xmlHttp.send(null);    //get方式参数为null,post方式,参数为提交的参数 。

以下以异步提交用户名(输入用户名之后,异步提交后台判断,前台立马提示是否已注册,不用提交时再判断!) 。

GET方式提交 。

xx.html 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< script type = "text/javascript" >
window.onload=function(){
   document.getElementById('username').onblur=function(){
     var name=document.getElementById('username').value;
     var req=new XMLHttpRequest();
     req.open('get','4-demo.php?name='+name);
     req.onreadystatechange=function(){
       if(req.readyState==4 && req.status==200){
         alert(req.responseText);
       }
     }
     req.send(null);  //如果send()方法中没有数据,要写null
   }
}
</ script >

用户名:  <input type="text" name="" id="username"> 。

xx.php 。

?
1
2
3
<?php
print_r( $_GET );
?> 

1、   IE不支持中文 。

2、   =、&与请求的字符串的关键字相混淆.

POST提交 。

xx.html 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< script type = "text/javascript" >
window.onload=function(){
   document.getElementById('username').onblur=function(){
     var name=document.getElementById('username').value;
     name=encodeURIComponent(name);
     var req=new XMLHttpRequest();
     req.open('post','5-demo.php?age='+20);
     req.onreadystatechange=function(){
       if(req.readyState==4 && req.status==200){
         alert(req.responseText);
       }
     }
   req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
     req.send('name='+name); 
   }
}
</ script >

用户名: <input type="text" name="" id="username"> 。

xx.php 。

?
1
2
3
4
<?php
print_r( $_POST );
print_r( $_GET );
?>

1、通过send()发送数据 。

2、必须设置setRequestHeader()将传递的参数转成XML格式 。

3、post提交可以直接提交中文,不需要转码 。

4、post请求中的字符也会和URL中的&、=字符相混淆,所以建议也要使用encodeURIComponent()编码 。

5、在POST提交的同时,可以进行GET提交 。

解决 IE不支持中文   =、&与请求的字符串的关键字相混淆 问题 。

在js中通过encodeURIComponent()进行编码即可.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.onload= function (){
   document.getElementById( 'username' ).onblur= function (){
     var name=document.getElementById( 'username' ).value;
     name=encodeURIComponent(name);  //编码
     var req= new XMLHttpRequest();
     req.open( 'get' , '4-demo.php?name=' +name);
     req.onreadystatechange= function (){
       if (req.readyState==4 && req.status==200){
         alert(req.responseText);
       }
     }
     req.send( null );  //如果send()方法中没有数据,要写null
   }
}

1、req.responseText:获取返回的字符串 。

2、req.responseXML:按DOM结构获取返回的数据 。

注意post/get两种提交方式的区别! 。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我.

原文链接:http://www.cnblogs.com/zxf100/p/6736290.html 。

最后此篇关于AJAX的使用方法详解的文章就讲到这里了,如果你想了解更多关于AJAX的使用方法详解的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com