Ajax异步编程知识点总结~超详细

         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)
             }
 })