Ajax入门

处理跨域的主要方法
1. JSONP
2. CORS
本文主要讨论CORS解决AJAX因为浏览器同源策略不能跨域请求数据的问题。


1. JSONP
JSONP跨域可以参考下面这篇博客
JSONP跨域


2. CORS
关于CORS细节可以阅读阮一峰的跨域资源共享 CORS 详解

跨域资源共享 CORS
1. 跨域资源共享CORS(Cross-origin resource sharing)

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而解决了AJAX不能跨域请求的问题。

  1. CORS需要浏览器和服务器同时支持。

    整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

    因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

    CORS允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。


AJAX简介
AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术)

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

XMLHttpRequest对象是浏览器提供的一个API,用来顺畅地向服务器发送请求并解析服务器响应,当然整个过程中,浏览器页面不会被刷新。

创建AJAX步骤:

1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
兼容各个浏览器的创建方法

function createRequest (){
    try {
        xhr = new XMLHttpRequest();
    }catch (tryMS){
        try {
            xhr = new ActiveXObject("Msxm12.XMLHTTP");
        } catch (otherMS) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (failed) {
                xhr = null;
            }
        }
    }
    return xhr;
}

2.准备请求
xhr.open(method,url,async);
- open() 的第一个参数是HTTP请求方法 - 有GET,POST,HEAD以及服务器支持的其他方法。 保证这些方法一定要是大写字母,否则其他一些浏览器(比如FireFox)可能无法处理这个请求。
- 第二个参数是要作为请求发送目标的URL。
- 第三个参数是true或false,表示请求是异步还是同步。true是异步,默认true。

3.发送请求
xhr.send();
send() 方法的参数可以是任何你想发送给服务器的内容

4.处理响应

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText);
    }
}
  1. onreadystatechange :当处理过程发生变化的时候执行下面的函数
  2. readyState状态值

    • 0:请求未初始化。
    • 1:正在加载) or (已建立服务器链接)
    • 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
    • 3:请求在处理中;
    • 4:响应已完成。
  3. responseText:服务器以文本字符的形式返回

  4. responseXML:获得 XML形式的响应数据

  5. 对象转换为JSON格式使用JSON.stringify

  6. json转换为对象格式用JSON.parse()

  7. 返回值一般为json字符串,可以用JSON.parse(xhr.responseText)转化为JSON对象


代码实现如下:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>  
    <button id="myButton">点我</button>
    <script src="./main.js"></script>
</body>
</html>

JS

myButton=document.getElementById('myButton')
myButton.addEventListener('click',(e)=>{
    let xhr=new XMLHttpRequest()
    xhr.onreadystatechange=()=>{
       if( xhr.readyState===4){
           console.log("请求响应都完毕了")
           if( xhr.status>=200&& xhr.status<300){
               console.log("请求成功")
               console.log(typeof  xhr.responseText)//判断返回数据的类型是String
               console.log( xhr.responseText)
               let string= xhr.responseText
               let object=window.JSON.parse(string)
               console.log(typeof object)
               console.log(object)
           }else if( xhr.status>=400){
               console.log("请求失败")
           }
       }
    }
    xhr.open('GET','/xxx')
    xhr.send()
})
 if(path==='/xxx'){
    response.statusCode=200
    response.setHeader('Content-Type', 'text/json;charset=utf-8')
    response.write(`
    {
      "note":{
        "to":"xxx",
        "from":"yyy",
        "content":"hello"
      }
    }
    `)
    response.end()
  }

当发送请求的时候,就会根据xml.open('GET','/xxx')找到对应的请求路径。在本文是找到/xxx路径,然后返回所请求的数据,在浏览器运行结果如下。


CORS跨域
关于CORS细节可以阅读阮一峰的跨域资源共享 CORS 详解

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>  
    <button id="myButton">点我</button>
     <script src="./main.js"></script>
</body>
</html>

JS

myButton.addEventListener('click',(e)=>{
    let xhr=new XMLHttpRequest()
    xhr.open('GET','http://jack.com:8002/xxx')
    xhr.onreadystatechange=()=>{
       if(xhr.readyState===4){
           console.log("请求响应都完毕了")
           if(xhr.status>=200&&xhr.status<300){
               console.log("请求成功")
               console.log(typeof xhr.responseText)
               console.log(xhr.responseText)
               let string=xhr.responseText
               let object=window.JSON.parse(string)
               console.log(typeof object)
               console.log(object)
           }else if(xhr.status>=400){
               console.log("请求失败")
           }
       }
    }
    xhr.send()
})
if(path==='/xxx'){
    response.statusCode=200
    response.setHeader('Content-Type', 'text/json;charset=utf-8')
    response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')
    response.write(`
    {
      "note":{
        "to":"xxx",
        "from":"yyy",
        "content":"hello"
      }
    }
    `)
    response.end()
  }

可以看到当代码没有下面这一行代码时AJAX并不能跨域请求response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')的时候,结果如下

从结果可以看出,因为浏览器的同源策略,AJAX不能跨域请求

解决的办法是添加response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')

代码下载:Github


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hqf2018/article/details/79980873
文章标签: ajax
个人分类: ajax
上一篇hexo+github搭建个人博客
下一篇JavaScript原型与原型链
想对作者说点什么? 我来说一句

Ajax入门Ajax入门

2009年04月19日 55KB 下载

Ajax完全入门Ajax完全入门

2011年04月11日 2.58MB 下载

AJAX技术入门AJAX技术入门

2010年04月22日 5.05MB 下载

Ajax 入门精通 Ajax 入门精通

2011年01月10日 13.79MB 下载

ajax基础教程 ajax入门知识

2011年05月18日 90KB 下载

Ajax入门,java Ajax入门

2011年07月10日 2.21MB 下载

Ajax 入门经典

2007年07月25日 490KB 下载

没有更多推荐了,返回首页

关闭
关闭