【建站系列教程】3.2、ajax使用精讲

【建站系列教程】3.2、ajax介绍

• ​​ajax的应用场景​​

• ​​1、form表单实现无跳转提交​​
• ​​2、ajax局部刷新代替刷新网页​​

• ​​ajax的通俗介绍​​
• ​​ajax的基本用法​​
• ​​ajax的ES写法​​

写在前面：大家好，我是热爱编程的​​小泽​​​。
【建站系列教程】是我的亲身建站经历写给广大建站同胞们的教学博客。
喜欢的话点个赞吧~ 评论区欢迎交流讨论~

ajax仍然是站长必会的一个知识，但是在我看来，ajax还是有很多安全性的问题，安全性问题，我会在下一篇博客进行总结。

ajax的应用场景

1、form表单实现无跳转提交

  一般情况下，form表单的语法为：

<form action='server.php' methon='POST'>
    <input ……
    <button type='submit'>submit</button>
  </form>

  每当点击按钮submit之后，本页面会跳转到server.php页面，由server.php文件处理数据，之后再由server.php文件里面的代码执行跳转到原来页面。
  因为每次提交都会跳转到php文件，然后再跳转回来很影响体验。所以现在提出一个需求，点击按钮，不跳转执行php文件。

  ajax能实现。

2、ajax局部刷新代替刷新网页

  很多时候，一些更改之后的数据都是需要用户刷新之后才能显示，现在可以实现在网页里面局部刷新。

  ajax能实现。

ajax的通俗介绍

  ajax全称是Asynchronous JavaScript And XML，让数据在后台进行异步传输。再通俗一点地说，​​我们可以使用js的ajax技术直接请求服务器上的内容，而不是必须使用php等后端语言。​​   需要注意的是，ajax有js原生版本的，也有jquery版本的，还有其他版本。ajax只是对浏览器js脚本的XMLHttpRequest 对象 (异步的与服务器交换数据)等的封装，并不是新的技术。

ajax的基本用法

​​这里推荐jq的ajax，用习惯了。只要js标签引入了jq就能使用jq的ajax。​​ 给出最常用的写法：

$.ajax({ 
    url: "http://www.xxx.com/xxx",  //请求的url
    contentType:'json',
    data:{account:'123',password:'123'},
    success: function(data){
          console.log(data);//data为服务器返回的数据
        },
        error:function(){
        }
      });

下面给出我总结的ajax比较常用的参数：​​血泪史！debug几年的心得​​

  【注】：参数async涉及到一个知识点。我们一般是在ajax的success回调函数中拿数据。但是如果我们要是在ajax之外使用数据，那么就会报错。见下图一：

控制台输出结果为：

0
2

  【原因】：在一个代码块中（上图的getInfor函数），ajax的success回调函数是最后最后执行的。所以在最下面的console.log(infor)是拿不到data数据的，只能在success回调函数中来使用数据。

那么如何解决这一问题？

  这个时候，就需要用到参数async。把async设置为true，改为同步，这样在ajax外也能拿到success回调函数的数据了。

  【注】：dataType也是常用的参数。其中，json、jsonp、xml最为常用，至于如何解析json和xml格式的数据，大家可以翻一下我的博客，里面有。这里也有一个特别重要的点！！

  跨域解决方案之一。

  有时候，用json格式去请求api，总是报跨域的错，这个时候把json改成jsonp，立马解决。

ajax的ES写法

​​介绍一下ajax的ES6的写法，用来装13……​​ 给出最常用的写法：

$.ajax({ 
    url: "http://www.xxx.com/xxx",  //请求的url
    contentType:'json',
    data:{account:'123',password:'123'},
    success: (data)=>{
          console.log(data);//data为服务器返回的数据
        },
        error:()=>{
        }
      });