微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ajax原理

1.什么是ajax

  Ajax(四个单词的缩写,Asynchronous JavaScript and XML)是一种网友交互的开发技术

  可以在页面不刷新的情况下向服务器发送HTTP请求,并使用JavaScript处理返回的结果

  发送Ajax的初衷是为了用户的表单进行数据验证,因为在网络匮乏的年代发送一个请求的速度特别慢,有了Ajax之后可以大大提高表单的提交效率

 

2.Ajax的用途

  Ajax技术在现代网页中使用的非常广泛,比如最常见的百度和淘宝 的相关关键字提醒,

  注册页面检测用户是否已经存在,瀑布流效果页面懒加载效果都是通过Ajax实现的。

 

3.Ajax的特点

  Ajax可以实现页面的局部刷新,相对于页面的整体刷新Ajax数据交互的速度更快,用户等待的时间也更短,用户体验也相对较好

  不仅如此Ajax还能够提高页面的加载速度,就是常说的懒加载效果

  对于一些用户现在浏览不到 的页面选择不加载等到页面滚动到目标位置之后,然后通过Ajax请求服务器的数据   来显示内容

 

4.ajax的使用

  原生的方式请求包括四步

  (1)。创建Ajax请求对象

  (2)。绑定事件

  (3)。初始化

     (4)  。发送请求

    (GET)

    var  x = new XMLHttpRequest();

    var  x.readystatechanges =  function(){

      if(onreadyState == 4 && status == 200){

        console.log(x.responseText);

      } 

      x.open(‘GET‘,‘./server.PHP?id=2‘,true);

      x.send(); 

    }  

    (POST)

      xmlhttp.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);

      发送参数  send(‘a=100&b=www‘)

 

AJAX 可以发送两种类型请求,GET 和 POST,get 传参是将参数缀到 url 的后边,post 传参需要把参数放置在 send 方法中.

------------------------------------------------------------------------------------------------------------------------------------------  

// readyState 是 ajax 对象中的一个属性,用来表示ajax对象的状态,总共是 5 个值,0-4
/**
0 代表未初始化
1 正在向服务端发送请求
2 已经接收完全部响应数据
3 表示正在解析数据
4 解析已经完成
*/

// status 是服务器响应的状态码
/**
常见的状态码有
200 OK
302 跳转
304 Not Modified
403 Forbidden
404 Not Found
500 内部错误
*/

5.  其他的方式

  除了原生方式可以发送 AJAX 请求之外,我们在项目中一般会使用第三方的工具包来发送,

  比如 jquery axios(安可C哦斯),特别是 axios 是专门用来发送请求用的,现在很多的单页APP在进行服务器交互的时候 都会使用 axios.

 

6.数据的返回

   在进行数据返回的时候,服务器一般的返回数据是json格式的  JavaScript需要对json格式的数据进行解析,解析的方式json。parse,

    如果是jQuery的话可以在发送的时候指定dataType为json,那么返回的数据就直接是json的对象

 

7.Ajax的缺点

    当然 AJAX 也有一些缺点,最大的缺点就是不能跨域,A 网站无法向 B 网站发送 AJAX 请求(就是所说的同源策略),

    解决这个问题我们可以使用 jsonp 技术. 例如jquery 中的 $.getJSON,向服务器发送请求的时候,

    将(回调的)函数名传递给服务器,服务器在返回结果的时候,返回的是一个函数调用的字符串,

    函数执行的参数就是数据

 

    客户端代码

    $.getJSON(‘http://b.com/server.PHP?callback=?‘,function(data){

      console.log(data)
    })

    服务器代码

    // b.com 服务器
    // server.PHP
    $str = json_encode([‘name‘=>‘zhangsan‘,‘age‘=>20]);

    echo $_GET[‘callback‘]."($str)";

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐