CGB2010 – DAY16 of Beijing Tao Project
1. Instructions on.html file interception
1.1 Problem Description
Explanation 1. What does the suffix in the picture mean?
.html: Static pages/Dynamic pages Static pages.
2. Instructions about static pages:
When a user accesses:https://i-item.jd.com/1000176…Query related item information based on itemID. After that, the product data is displayed in the specified location through JS.
3. Instructions about the value in the URL: since the ID number of the product is in the URL, the back-end program needs to query data information through the ID in the URL. So the value must be RESTful…
4. How should SpringMVC intercept the request path? url1:localhost:8091/items/addUser url1:localhost:8091/items/updateItem url1:localhost:8091/items/100100.html @RequestMapping(“/items/{itemId}.html”) Note: If you need to implement this feature, you should intercept requests ending in.html.
1.2 Instructions about.html interception
By default, SpringMVC only intercepts prefix requests. If you encounter a request for a static resource. The general default condition. Go and query the file in WebApp.
Question: How can an application be blocked by SpringMVC?
1.3 Enable suffix type matching
Description: SpringMVC is required to block postfix requests through the configuration file. In HTML, for example
1.4 Why end with.html
Note: because of the current e-commerce sites, the need for search engine drainage. In order to make it easier for search engines to record the content of the site. Most of the information on the page ends in.html. Conclusion: The average search engine only records static page information of.html. The purpose of doing this can effectively increase the exposure of the search engine.
1.5 How search engines work
Inverted index: Retrieves the position of articles by keyword.
2 Cross-domain correlation description
2.1 Codomain testing
2.1.1 JSON data modification
2.1.2 JS analysis of page
2.1.3 Test results
2.1.4 Description of results
The request URL address: http://manage.jt.com:80/test.html Ajax request address: http://manage.jt.com:80/test.json
Analysis results: 1. The request protocol is the same 2. The request domain name is the same 3
2.2 Cross-domain testing
2.2.1 Description of JT-Web Server Page
2.2.2 Problem description
The data cannot be obtained with the above request. Reason: the URL address: http://www.jt.com:80/test.html Ajax address: http://manage.jt.com:80/test.json
Problem: Same protocol, same domain name, same port number
2.3 Homologous Policy
Same origin policy: When a user accesses a page and the page makes an Ajax request. Required protocol :// Domain name: port number must be the same. The same domain accesses satisfy the same origin policy if they are the same. The network can communicate normally. Cross-domain access When one of the protocols :// domain name: ports is not satisfied, the request is cross-domain. The browser does not parse the return value if it is a cross-domain request.
2.4 Homology Policy Extension
Examination questions: http://manage.jt.com:80/a.js http://127.0.0.1:8091/b.js cross-domain
2.5 Summary of the same origin policy
Actors: The same origin problem only occurs when the browser participates in the implementation…
Policy Conventions: Protocol :// Domain: Port None of the three is necessary.
Cross-domain problem initiator: Ajax requests. You can’t call it cross-domain without Ajax involvement.
Consequences: If the domain is crossed, the program can still execute normally. But the client can’t get the result. For security reasons. The browser does not parse the return value.
2.6 the json
2.6.1 json introduces
JSONP(JSON with Padding) is a “usage mode” of JSON that can be used to solve the cross-domain data access problems of major browsers. Because of the same origin policy, in general, Web pages located at server1.example.com cannot communicate with servers that are not server1.example.com, whereas HTML’s
Note: JSONP uses the GET type commonly used to obtain resources if required. Reason: The SRC attribute in JavaScript can only support the GET request type.
2.6.2 Description of JSONP principle
1). Implement remote data access based on the SRC attribute in JavaScript.
<script type="text/javascript" src="http://manage.jt.com/test.json"></script>
2). Custom callback function
3). Encapsulate the return value in a special format
Syntax: Callback (JSON data)
2.6.3 Optimization of JSONP
Problems: 1). The majority of normal remote requests are still in the form of Ajax. Can you combine the JSONP approach with Ajax? 2). Every time a JSONP request is made, a custom callback function is cumbersome. 3). If the front and back ends need to complete the call, the callback function name needs to be uniform. The best way to do this is to pass a callback function as an argument.
` <! DOCTYPE HTML > < HTML > <head> <meta charset=" utf-8 "> <title> <script type="text/javascript" SRC = "http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js" > < / script > < script type = "text/javascript" > $(function () { Alert (" Test access started!!!!!") ) $. Ajax ({url: "http://manage.jt.com/web/testJSONP", type: "get", / / the json can only support a get request dataType: "json", //jsonp: "callback"; // jsonpCallback: "callback" "Hello ", // specify the name of the callback function success:function (data){// The data returned by jQuery is the JSON string console.log(" The callback successfully executed!!!!!"). )}}); }) < / script > < / head > < body > < h1 > JSON cross-domain request test < / h1 > < / body > < / HTML >2.6.4 About JSONP back-end business invocation
`package com.jt.web.controller; import com.jt.pojo.ItemDesc; import com.jt.util.ObjectMapperUtil; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.Date; @RestController public class JsonPController {// Return value required: Callback @requestMapping ("/web/ testJsonp ") public String jsonp(String callback){ItemDesc ItemDesc = new ItemDesc(); ItemDesc.setItemId (1000L). SetItemDesc ("JSONP call was successful!!") ) .setCreated(new Date()).setUpdated(new Date()); String json = ObjectMapperUtil.toJSON(itemDesc); return callback + "( " + json + ")"; }}2.6.4 About JSONP Backend Business Invocation (2)
2.7 CORS
2.7.1 Introduction to CORS (Cross-domain Resource Sharing)
CORS requires both browser and server support. Currently, all browsers support this feature, and Internet Explorer cannot be lower than Internet Explorer 10. The entire CORS communication process is done automatically by the browser, without the user’s participation. To the developer, CORS communication is no different from same-origin Ajax communication; the code is exactly the same. As soon as the browser detects that the Ajax request is cross-source, it automatically adds some additional response headers. If the back-end server allows resource sharing, access is indicated in the response header. Therefore, the key to CORS communication is the server
2.7.2 How CORS works
2.7.3 CORS primer case
2.7.4 Description of response headers
Note: If the server side allows cross-domain, the server information is added in the response header.
3. JT-SSO, Beijing Tao’s single sign-on service
3.1 Complete the login/registration page jump
3.1.1 editor UserController
3.1.2 JSONP identification of the page
3.1.3 JS identification of the page
Shortcut key: Eclipse shortcut key: Ctrl + H
