原生ajax请求的5个步骤

什么是ajax?


通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。


ajax的优点:


1.实现局部更新(无刷新状态下)
2.减轻了服务器端的压力


ajax的缺点:


1.破坏了浏览器前进和后退机制(因为ajax自动更新机制)
2.一个Ajax请求多了,也会出现页面加载慢的情况。
3.搜索引擎的支持程度比较低。
4.ajax的安全性问题不太好(可以用数据加密解决)。
注:如果要使用ajax必须要有后端环境的支持(服务器端)。


原生ajax请求的五个步骤:


1.实例化请求对象
2.建立服务器链接
3.监听服务器响应
4.发送请求
5.响应成功,传递参数
http请求的两种方式:
get:用于获取数据,get是在url上传递数据(网址后面的东西),存储量较少,安全系数比较低。
post:用于上传数据,容量几乎是无限(多用于表单)。

{

    // 1.创建HXMLHttpRequest对象
    var xhr=null;
    //  var xhr = new XMLHttpRequset();
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();// ie7+等现代浏览器
    }else if(window.ActiveXObject){
        // ie6 ,老版本 Opera
        xhr=new ActiveXObject('Microsft.XMLHttp')
    }

    // 2.创建新的http请求,指定请求方法、url及验证信息
    xhr.open("get/post",'https://www.baidu.com/',true) //true表示异步,可以省略

    // 3.设置请求头,get方式不需要
    // post需要设置请求头
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    // 若为同步,此代码不用写,直接在send后,用xhr.responseText

    // 5.相应成功,传递参数   并监听
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            // 获取异步返回的json数据
            xhr.responseText
            xhr.responseXML.children[0].children
            JSON.parse(xhr.responseText)//字符串转对象
        }
    }
    
    // 4.发送HTTP请求
    // post 传参数,get 不传参数
    xhr.send('user'+value)

    
}

猜你喜欢

转载自blog.csdn.net/m0_60237095/article/details/128056188