Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
Ajax异步编程可以通过Javascrpit的HMLhttpRequst来调用:
window.onclick = function()
{
//创建ajax对象
let httpRequset = new XMLHttpRequset()
console.log(httpRequset)
//准备请求
httpRequset.open('get','目标文件.php',true)
//发请求
httpRequset.send()
httpRequset.onreadystatechange = function()
{
if(httpRequset.readyState == 4 && httpRequset.state == 200)
{
console.log(httpRequset.responseText)
document.querySelector('标签').innerText = httpRequset.responseText
}
}
}
在则可以使用格式数据:
document.querySelector('input').addEventListener('click',function()
{
let httpRequset = new XMLHttpRequest()
console.log(httpRequset)
// 准备请求
httpRequset.open('get','目标文件.php',true)
// 发送求
httpRequset.send()
httpRequset.onreadystatechange = function()
{
if(httpRequset.readyState == 4 && httpRequset.status == 200)
{
console.log(httpRequset.responseText)
console.log(JSON.parse(httpRequset.responseText))
}
}
})
下面是使用JQuery框架来实现的Ajax的方便使用:
Get方法请求:
$('选择器').click(function(){
$.get('目标文件.php',function(){
console.log('hahahha')
$('p').text(date)
})
})
Post方法请求:
$('选择器').on('click',function(){
$.post('目标文件.php',function(){
$('选择器').val(date)
})
})
Ajax方法请求:
$('选择器').click(function(){
$.ajax({
type:'get',
url:'目标文件.php',
success:function(){
console.log(date)
$('选择器').text(date)
}
})
})
$('选择器').click(function(){
$.ajax(
{
type:'post',
url:'目标文件.php',
data:{first:$('input[name = first]').val(),second:$('input[name =
second]').val()},
success:function(data)
{
$('选择器').val(data)
}
})