javascript 和 jQuery 的Ajax 用法

ajax技术的核心是XMLHttpRequest对象(简称XHR)

ajax通过原生的XMLHttpRequest对象发出HTTP请求,得到服务器返回的数据后,再进行处理。

面试必须写的
原生javascript Ajax:
ajax包括几个步骤:

1:创建ajax请求

2:发出http请求

3:收到服务器传回的消息

4:更新网页数据

xhr.html



    
        
        
    
    
        

xhr.php

";
//      echo $_POST['data'];
//      exit;
//  }

    $newsList = array();
    $newsList[0] = array("title" => "新闻1");
    $newsList[1] = array("title" => "新闻2");
    $newsList[2] = array("title" => "新闻3");
    //将数组变成json串
    //json_encode是json串的编码函数,传入一个数组类型的参数
    $jsonstr = json_encode($newsList);
//  echo "createList(".$jsonstr.")";
//  echo $_GET['callback']."(".$jsonstr.")";
//  echo "-----------";//不是json格式,会报错
    echo $jsonstr;//输出的字符串必须是严格遵守json格式的,才可以使用  JSON.parse();
//  echo "----------";
?>

jquery Ajax 是对XMLHTTPRequestrian对象的封装

        基本方法就是ajax();
        dataType:将字符串类型转换为json串
        参数是一组对象
            $.ajax({
                type:"get",
                url:"../弹幕/getdanmu.php",
                data:{},
                type:"post",//数据提交类型
                url:"../弹幕/danmu.php",//请求地址
                data:{word:"abc",username:"hzx"},//发送数据
                dataType:"json",//返回数据的类型
                async:true,//是否为异步 ,true 异步
                success为数据加载完成后的回调函数
                success:function(data1){
                    console.log(data1);
                    var show = document.getElementById('show');
                    for(i in data1){
                        show.innerHTML += data1[i]+"
"; } } });

get方法获取后台数据

$.get("getdanmu.php",{word:"abc"},function(data,status){
    console.log(data,status);
},"json")

post方法获取后台数据

$.post("danmu.php",{word:"abc"},function(data,status){
    console.log(data,status);
})

load方法引入界面

在需要弹幕页面的HTML中加入以下代码就可以插入链接的页面

$("#show").load("../web.html");//留言导航页

$("#show").load("danmu.html");

我的博客链接

更多资源就在我的gitHub:https://github.com/huzixian2017/huzixian2017.github.io

你可能感兴趣的:(javascript 和 jQuery 的Ajax 用法)