ホームページ > 記事 > ウェブフロントエンド > AJAXの使い方を詳しく分析（コード貼り付け）
AJAXの使い方を詳しく分析（コード貼り付け）
- 亚连オリジナル
- 2018-05-18 09:30:151929ブラウズ
AJAX の使用方法を以下にまとめましたので、興味のある方はご覧ください。
HTTPS
"/jsontest/randomdata/" // there was a missing trailing /// i.e. // was going to https://larsendt.com/jsontest/randomdata/?ymax=500&count=32&t=0.96041791105086431234
GETリクエスト
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function checkname(){
//ajax校验用户名
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
document.getElementById('result').innerHTML = xhr.responseText;
}
} //获得输入的用户名，并传递个服务器端
var ming = document.getElementById('username').value; //对ming变量的特殊符号信息进行编码
ming = encodeURIComponent(ming);
xhr.open('get','./04.php?nm='+ming+'&age=23', true); //xhr.open第三个参数默认异步请求为true, 改成同步请求为false;
xhr.send(null);
} </script>
</head>
<body>
<h2>ajax之get形式请求</h2>
<p>用户名：<input type="text" id="username" onblur="checkname()" /></p>
<p>密码：<input type="password" id="userpwd" /></p>
<p id="result"></p>
</body></html>12345678910111213141516171819202122232425262728293031323334353637POSTリクエスト
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function checkname(){
//ajax校验用户名
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
document.getElementById('result').innerHTML = xhr.responseText;
}
}
xhr.open('post','./05.php?height=165', true); //默认为true异步请求, false为同步请求
//post请求需要把数据组织为xml格式
//以下方法必须要在"open"方法后进行设置
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); //获得输入的用户名，并传递个服务器端
var ming = document.getElementById('username').value; //对ming变量的特殊符号信息进行编码
ming = encodeURIComponent(ming); //把传递的参数变为"请求字符串"传递给send方法
var info = "nm="+ming+"&age=20";
xhr.send(info);
} </script>
</head>
<body>
<h2>ajax之post形式请求</h2>
<p>用户名：<input type="text" id="username" onblur="checkname()" /></p>
<p>密码：<input type="password" id="userpwd" /></p>
<p id="result"></p>
</body></html>123456789101112131415161718192021222324252627282930313233343536373839404142FormDateはフォームデータを収集します
<!DOCTYPE html><html><head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="common.js"></script></head><body>
<form>
<p>用户名：<input type="text" name="user"></p>
<p>密 码：<input type="password" name="pwd"></p>
<p>邮 箱：<input type="text" name="email"></p>
<p>头 像：<input type="file" name="userpic"></p>
<p><input type="button" value="提交" id="btn"></p>
</form>
<script type="text/javascript">
//form表单节点对象
var oForm = document.getElementsByTagName('form')[0]; //按钮
var oBtn = $('btn');
oBtn.onclick = function(){
//先收集输入框的内容
var user = document.getElementsByName('user')[0].value; var pwd = document.getElementsByName('pwd')[0].value; var email = document.getElementsByName('email')[0].value; //通过ajax提交到服务器
var xhr; try{
xhr = new XMLHttpRequest();
}catch(e){
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
xhr.open('POST','upload.php',true); //实例化表单对象，获得表单里面的输入框的内容（主流浏览器支持）
//参数就是表单节点对象
var data = new FormData(oForm);
xhr.send(data);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status==200){
console.log(xhr.responseText);
}
}
} </script></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748AJAXクロスドメイン
//放在被访问资源上 <?php header('Access-Control-Allow-Origin:http://A.abc.com'); ?> 12
jasonP
//在客户端定义函数,在服务端定义调用函数和传入参数,请求时传入调用参数内容,服务端就用客户端传入的函数名为调用函数名(可变函数); //<script src=xxx.kuaiyu.com/xxx.php></script> https://xxx.cc.com/xx.php?param=xxx&function_name=function_name//百度标准接口 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=法国大选&cb=demo12345
JQUERY AJAX
構文:
$.get(url,data,function(),dataType)
url: 要求されたファイル。
データ: データを転送します。
function(responseText, statusText,xhr): 関数を返します。
responseText: 返されたテキスト。
statusText: 返されたステータス値。
status には、リクエストのステータス
(「success」、「notmodified」、「error」、「timeout」、「parsererror」) が含まれます。
xhr: XMLHttpRequest() リクエスト オブジェクト。
データ型:
"xml" - XMLドキュメント
"html" - プレーンテキストとしてのHTML
"text" - プレーンテキスト文字列
"script" - 応答をJavaScriptとして実行し、プレーンテキストとして返します
"json" - as JSON 応答を実行し、JavaScript オブジェクトとして返します
"jsonp" - JSONP を使用して JSON チャンクをロードすると、コールバックを指定するために URL に "?callback=?" が追加されます
.get(),.get() ,.post() //Post パラメータと 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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JQuery Collapse</title><SCRIPT LANGUAGE="JavaScript" src="jquery-3.1.1.js"></SCRIPT><script type="text/javascript">$(function(){
$('#bt1').click(function(){
var username = $('input[name=username]').val();//获取用户名的值
var pwd = $('input[name=password]').val();//获取密码的值
$.get( 'get.php',//url
{username:username,pwd:pwd},//$_GET['username']:请求的数据
function(res,sta,xhr){//回调函数
//res:返回值
//sta:返回的状态
//xhr:请求的对象XMLHttprequest
// alert('返回值是：'+res);
if(sta == 'success'){
$('span').html(res);
}
}
)
});
});</script>
<style type="text/css"></style>
</head>
<body>用户名：<input type="text" name='username' /><span></span><br>
密码：<input type="password" name='password' /><br>
<input type="button" id="bt1" value="发送请求" />
</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738394041$.ajax()
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JQuery Collapse</title><SCRIPT LANGUAGE="JavaScript" src="jquery-3.1.1.js"></SCRIPT><script type="text/javascript">$(function(){
$('input[name=username]').keyup(function(){
var username = $('input[name=username]').val();//获取用户名的值
var pwd = $('input[name=password]').val();//获取密码的值
$.ajax({
url:'post.php',
data:{username:username,pwd:pwd},
dataType:'html',
type:'post',
success:function(mydata){
$('span').html(mydata);
}
})
});
});</script>
<style type="text/css"></style>
</head>
<body>
用户名：<input type="text" name='username' /><span></span><br>
密码：<input type="password" name='password' /><br>
<input type="button" id="bt1" value="发送请求" />
</body>
</html>以上、私がまとめた AJAX の使い方を皆さんの参考になれば幸いです。 。
関連記事:
jQuery+ajaxでWCFサービスを呼び出す手順を詳しく解説
以上がAJAXの使い方を詳しく分析（コード貼り付け）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。