ホームページ > 記事 > ウェブフロントエンド > ajax デモのソースコード
ajax デモのソースコード
- 韦小宝オリジナル
- 2018-03-12 10:54:501847ブラウズ
この記事では、ネイティブ JavaScript での ajax 操作を紹介します。内容は比較的基本的なものです。JavaScript での ajax 操作をもう一度理解することができます。一緒に見てください！
以下のhtmlファイルはサーバー環境で開く必要があります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ceshi</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
帐号：<input type="text" id="username">
密码：<input type="password" id="password">
<input type="button" value="提交" onclick="checkname()">
</body>
<script type="text/javascript">
function checkname() {
var username = document.getElementById('username').value;
//1、创建对象
var xhr = new XMLHttpRequest();
//2、连接服务器
xhr.open('GET','name.json',true);//json数据内容如下图3
//3、向服务器发送请求
xhr.send(null);
//4、请求完成，响应就绪
xhr.onreadystatechange=function(){
if (xhr.readyState==4) {
if (xhr.status==200) {//表示已经获取到文件。
var str = JSON.parse(xhr.responseText);//将json数据转换成js数组对
alert(str);//输出结果如图4 。
}else{
alert(xhr.statusText)//如果没有获取name.json的数据，即服务器找不到这个文件，则执行该段代码。输出框会显示“Not Found”。如果是alert(xhr.status)，则显示404；
}
}
}
};
</script>
</html>
<script type="text/javascript">
function checkname() {
var username = document.getElementById('username').value;
var boo = false;
//1、创建对象
var xhr = new XMLHttpRequest();
//2、连接服务器
xhr.open('GET','name1.json',true);
//3、向服务器发送请求
xhr.send(null);
//4、请求完成，响应就绪
xhr.onreadystatechange=function(){
if (xhr.readyState==4) {
if (xhr.status==200) {
var str = JSON.parse(xhr.responseText);//将json数据转换成js数组对象
alert(str)
for (var i = 0; i < str.length; i++) {
if (username == str[i]) {
boo = true;
}
}//判断用户名是否已经存在，即输入的用户名是否存在与json文件中。
if (boo) {
alert("用户民已存在");
} else {
alert("用户名可以使用")
}
}
}
};
｝；
</script>ajax テクノロジーは、デスクトップ アプリケーションのエクスペリエンスを Web アプリケーションにもたらすことができるテクノロジーです。このエクスペリエンス効果は主に、ページを更新せずにデータを交換したり、ページを更新せずにコンテンツを変更したりすることです。 ajaxの機能は本当にたくさんあり、語り尽くせないほどたくさんあります
おすすめのajax関連記事:
jqを使って送信する複数の Ajax を使用してコールバックを実行する ヒント
以上がajax デモのソースコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Cookieの使用についての詳しい説明次の記事：Cookieの使用についての詳しい説明