一文读懂Ajax的使用方法

AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。本篇AJAX教程主要介绍了AJAX的使用的相关知识。

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

首先，对于AJAX的使用有4步：

1.创建AJAX对象

var xmlHttp = new XMLHttpRequest();

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

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

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

xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState==4 && xmlHttp.status==200) {
  }
}

4.发送请求

xmlHttp.send(null); 

//get方式参数为null,post方式，参数为提交的参数、

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

GET方式提交

xx.html

<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

<?php
print_r($_GET);
?>　

(1)IE不支持中文

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

POST提交

xx.html

<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

<?php
print_r($_POST);
print_r($_GET);
?>

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

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

(3)post提交可以直接提交中文，不需要转码

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

(5)在POST提交的同时，可以进行GET提交

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

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

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结构获取返回的数据

以上就是关于“一文读懂Ajax的使用方法”介绍，大家如果想了解更多相关知识，不妨来关注一下本站的Java极悦在线学习，里面的课程内容细致全面，很适合没有基础的小伙伴学习，希望对大家能够有所帮助哦。